added tailwindcss, cleaned up the default stylesheets, and added tail…

…wind and postcss configs
jarodtaylor · Sep 15, 2024 · 0abc97e · 0abc97e
1 parent 5bd5b18
commit 0abc97e
Show file tree

Hide file tree

Showing 11 changed files with 1,149 additions and 60 deletions.
diff --git a/app/frontend/entrypoints/application.js b/app/frontend/entrypoints/application.js
@@ -1,4 +1,4 @@
-import "~/stylesheets/index.css";
+import "~/stylesheets/application.css";
 import "~/controllers";
 import "@hotwired/turbo-rails";
 // To see this message, add the following to the `<head>` section in your

diff --git a/app/frontend/stylesheets/application.css b/app/frontend/stylesheets/application.css
@@ -0,0 +1,3 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
diff --git a/app/frontend/stylesheets/base.css b/app/frontend/stylesheets/base.css
diff --git a/app/frontend/stylesheets/index.css b/app/frontend/stylesheets/index.css
diff --git a/app/frontend/stylesheets/reset.css b/app/frontend/stylesheets/reset.css
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
@@ -1,3 +1,3 @@
 <% provide(:title, "Home") %>
-<p>Find me in app/views/home/index.html.erb</p>
+<p class="mb-10">Find me in app/views/home/index.html.erb</p>
 <p>Stimulus says, <i data-controller=hello></i></p>
diff --git a/package.json b/package.json
@@ -13,10 +13,17 @@
     "postcss": "^8.4.24",
     "rollup": "^4.2.0",
     "stimulus-vite-helpers": "^3.1.0",
+    "tailwindcss": "^3.4.11",
     "vite": "^5.0.0",
     "vite-plugin-rails": "^0.5.0"
   },
   "devDependencies": {
+    "eslint": "^9.10.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-tailwindcss": "^3.17.4",
+    "path": "^0.12.7",
+    "prettier": "^3.3.3",
     "run-pty": "^5"
   }
 }
diff --git a/postcss.config.cjs b/postcss.config.cjs
@@ -1,3 +1,6 @@
 module.exports = {
-  plugins: [require("autoprefixer")],
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
 };
diff --git a/postcss.config.js b/postcss.config.js
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+// const colors = require('tailwindcss/colors')
+// const defaultTheme = require('tailwindcss/defaultTheme')
+
+module.exports = {
+  content: [
+    './app/helpers/**/*.rb',
+    './app/frontend/stylesheets/**/*.css',
+    './app/views/**/*.{html,html.erb,erb}',
+    './app/frontend/**/*.js',
+  ],
+  theme: {
+    extend: {
+    },
+  },
+}