Update to Tailwind v4

CHANGELOG.md

@@ -44,14 +44,15 @@ Changelog](https://keepachangelog.com/en/1.0.0/).
 - Update `rubocop-rails` to `2.28.0`
 - Update `sidekiq` to `7.3.7`
 - Update `stimulus-rails` to `1.3.4`
-- Update `turb-rails` to `2.0.11`
+- Update `turbo-rails` to `2.0.11`
 
 #### Front-end dependencies
 
 - Update `@hotwired/turbo-rails` to `8.0.20`
 - Update `esbuild` to `0.24.2`
-- Update `postcss` to `8.5.1`
-- Update `tailwindcss` to `3.4.17`
+- Update `tailwindcss` to `4.0.0`
+- Update `@tailwindcss/cli` to `4.0.0`
+- Update `@tailwindcss/postcss` to `4.0.0`
 
 ## [0.9.0] - 2024-08-09
 

app/assets/stylesheets/application.tailwind.css

@@ -1,7 +1 @@
-/*
- * Your custom CSS goes here but before adding a lot of CSS check this out:
- *   https://tailwindcss.com/docs/extracting-components
-*/
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
+@import "tailwindcss" source("/app");

app/views/layouts/application.html.erb

@@ -36,7 +36,7 @@
             </p>
           </div>
           <div class="mt-2 order-3 w-full sm:mt-0 sm:w-auto">
-            <div class="rounded-md shadow-sm">
+            <div class="rounded-md shadow-xs">
               <span class="flex items-center justify-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-gray-500">
                 RAILS_ENV = <%= Rails.env %>
               </span>

package.json

@@ -4,11 +4,10 @@
   "dependencies": {
     "@hotwired/stimulus": "3.2.2",
     "@hotwired/turbo-rails": "8.0.12",
-    "autoprefixer": "10.4.20",
     "esbuild": "0.24.2",
-    "postcss": "8.5.1",
-    "postcss-import": "16.1.0",
-    "tailwindcss": "3.4.17"
+    "tailwindcss": "4.0.0",
+    "@tailwindcss/cli": "4.0.0",
+    "@tailwindcss/postcss": "4.0.0"
   },
   "scripts": {
     "build": "./run yarn:build",

run

@@ -132,7 +132,7 @@ function yarn:build:css {
     args=(--watch)
   fi
 
-  tailwindcss --postcss \
+  tailwindcss \
     -i ./app/assets/stylesheets/application.tailwind.css \
     -o ./app/assets/builds/application.css "${args[@]}"
 }

tailwind.config.js

@@ -1,8 +1,3 @@
-module.exports = {
-  content: [
-    './app/views/**/*.html.erb',
-    './app/helpers/**/*.rb',
-    './app/assets/stylesheets/**/*.css',
-    './app/javascript/**/*.js'
-  ]
-}
+export default {
+  plugins: ["@tailwindcss/postcss"],
+};