Add support for tailwindcss

yatish27 · Apr 19, 2024 · 516ab89 · 516ab89
1 parent 2c647b6
commit 516ab89
Show file tree

Hide file tree

Showing 11 changed files with 676 additions and 101 deletions.
diff --git a/app/frontend/entrypoints/application.css b/app/frontend/entrypoints/application.css
@@ -0,0 +1 @@
+@import "~/stylesheets/index.css";
diff --git a/app/frontend/stylesheets/index.css b/app/frontend/stylesheets/index.css
@@ -1,3 +1,6 @@
-@import "modern-normalize";
-@import "reset";
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
 @import "base";
+
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,11 @@
 <% provide(:title, "Home") %>
-<p>Find me in app/views/home/index.html.erb</p>
-<p>Stimulus says, <i data-controller=hello></i></p>
+<div class="bg-gray-100 py-8">
+  <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
+    <h1 class="text-3xl font-bold text-gray-900 mb-4">Welcome</h1>
+    <p class="text-lg text-gray-600 mb-6">Find me in app/views/home/index.html.erb</p>
+    <p class="text-lg text-gray-600">
+      Stimulus says,
+      <i class="italic text-indigo-600" data-controller="hello">Hello, World!</i>
+    </p>
+  </div>
+</div>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -10,6 +10,8 @@
 
     <%= vite_client_tag %>
     <%= vite_javascript_tag "application", "data-turbo-track": "reload" %>
+    <%= vite_stylesheet_tag "application", data: {"turbo-track": "reload"} %>
+
     <!--
       If using a TypeScript entrypoint file:
         vite_typescript_tag 'application'

diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -4,12 +4,15 @@
   "dependencies": {
     "@hotwired/stimulus": "^3.2.2",
     "@hotwired/turbo-rails": "^8.0.4",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.19",
     "modern-normalize": "^2.0.0",
-    "postcss": "^8.4.24",
+    "postcss": "^8.4.38",
     "rollup": "^4.2.0",
     "stimulus-vite-helpers": "^3.1.0",
     "vite": "^5.0.0",
     "vite-plugin-rails": "^0.5.0"
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.3"
   }
 }
diff --git a/postcss.config.cjs b/postcss.config.cjs
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,18 @@
+/** @type {import('tailwindcss').Config} */
+
+export default {
+  darkMode: ["class"],
+  content: [
+    "./app/views/**/*.{erb,haml,html,slim,rb}",
+    "./app/views/components/**/*.rb",
+    "./app/helpers/**/*.rb",
+    "./app/assets/stylesheets/**/*.css",
+    "./app/javascript/**/*.js",
+    "./app/frontend/**/*.css",
+    "./app/frontend/**/*.js",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};