upgrade tailwindcss-rails from v3 to v4

- Update gem from ~> 3.0 to ~> 4.0 (tailwindcss-ruby 4.2.1)
- Migrate CSS from app/assets/stylesheets/ to app/assets/tailwind/
- Replace tailwind.config.js with @theme, @plugin directives in CSS
- Convert @import "tailwindcss/base|components|utilities" to @import "tailwindcss"

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: dadachi

Gemfile

@@ -56,7 +56,7 @@ gem "whenever", require: false
 gem "madmin", "~> 2.0"
 gem "valid_email2"
 gem "importmap-rails"
-gem "tailwindcss-rails", "~> 3.0"
+gem "tailwindcss-rails", "~> 4.0"
 gem "rack-attack"
 gem "resend"
 # Fix LoadError: cannot load such file -- csv

Gemfile.lock

@@ -424,15 +424,14 @@ GEM
     stimulus-rails (1.3.4)
       railties (>= 6.0.0)
     stringio (3.2.0)
-    tailwindcss-rails (3.3.2)
+    tailwindcss-rails (4.4.0)
       railties (>= 7.0.0)
-      tailwindcss-ruby (~> 3.0)
-    tailwindcss-ruby (3.4.19)
-    tailwindcss-ruby (3.4.19-aarch64-linux)
-    tailwindcss-ruby (3.4.19-arm-linux)
-    tailwindcss-ruby (3.4.19-arm64-darwin)
-    tailwindcss-ruby (3.4.19-x86_64-darwin)
-    tailwindcss-ruby (3.4.19-x86_64-linux)
+      tailwindcss-ruby (~> 4.0)
+    tailwindcss-ruby (4.2.1)
+    tailwindcss-ruby (4.2.1-aarch64-linux-gnu)
+    tailwindcss-ruby (4.2.1-arm64-darwin)
+    tailwindcss-ruby (4.2.1-x86_64-darwin)
+    tailwindcss-ruby (4.2.1-x86_64-linux-gnu)
     thor (1.5.0)
     timeout (0.6.1)
     tsort (0.2.0)
@@ -518,7 +517,7 @@ DEPENDENCIES
   solid_cache
   solid_queue
   stimulus-rails (~> 1.0, >= 1.0.2)
-  tailwindcss-rails (~> 3.0)
+  tailwindcss-rails (~> 4.0)
   turbo-rails (~> 2.0.3)
   tzinfo-data
   valid_email2

app/assets/stylesheets/application.tailwind.css

@@ -0,0 +1,81 @@
+@import "tailwindcss";
+
+@plugin "@tailwindcss/forms";
+@plugin "@tailwindcss/typography";
+
+@theme {
+  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+  --breakpoint-3xl: 1792px;
+  --breakpoint-4xl: 2048px;
+  --breakpoint-5xl: 2304px;
+  --breakpoint-6xl: 2560px;
+  --breakpoint-7xl: 2816px;
+  --breakpoint-8xl: 3072px;
+  --breakpoint-9xl: 3328px;
+  --breakpoint-10xl: 3584px;
+  --breakpoint-11xl: 3840px;
+
+  --color-primary-50: var(--color-blue-50);
+  --color-primary-100: var(--color-blue-100);
+  --color-primary-200: var(--color-blue-200);
+  --color-primary-300: var(--color-blue-300);
+  --color-primary-400: var(--color-blue-400);
+  --color-primary-500: var(--color-blue-500);
+  --color-primary-600: var(--color-blue-600);
+  --color-primary-700: var(--color-blue-700);
+  --color-primary-800: var(--color-blue-800);
+  --color-primary-900: var(--color-blue-900);
+  --color-primary-950: var(--color-blue-950);
+
+  --color-secondary-50: var(--color-emerald-50);
+  --color-secondary-100: var(--color-emerald-100);
+  --color-secondary-200: var(--color-emerald-200);
+  --color-secondary-300: var(--color-emerald-300);
+  --color-secondary-400: var(--color-emerald-400);
+  --color-secondary-500: var(--color-emerald-500);
+  --color-secondary-600: var(--color-emerald-600);
+  --color-secondary-700: var(--color-emerald-700);
+  --color-secondary-800: var(--color-emerald-800);
+  --color-secondary-900: var(--color-emerald-900);
+  --color-secondary-950: var(--color-emerald-950);
+
+  --color-tertiary-50: var(--color-gray-50);
+  --color-tertiary-100: var(--color-gray-100);
+  --color-tertiary-200: var(--color-gray-200);
+  --color-tertiary-300: var(--color-gray-300);
+  --color-tertiary-400: var(--color-gray-400);
+  --color-tertiary-500: var(--color-gray-500);
+  --color-tertiary-600: var(--color-gray-600);
+  --color-tertiary-700: var(--color-gray-700);
+  --color-tertiary-800: var(--color-gray-800);
+  --color-tertiary-900: var(--color-gray-900);
+  --color-tertiary-950: var(--color-gray-950);
+
+  --color-danger-50: var(--color-red-50);
+  --color-danger-100: var(--color-red-100);
+  --color-danger-200: var(--color-red-200);
+  --color-danger-300: var(--color-red-300);
+  --color-danger-400: var(--color-red-400);
+  --color-danger-500: var(--color-red-500);
+  --color-danger-600: var(--color-red-600);
+  --color-danger-700: var(--color-red-700);
+  --color-danger-800: var(--color-red-800);
+  --color-danger-900: var(--color-red-900);
+  --color-danger-950: var(--color-red-950);
+
+  --color-gray-50: var(--color-neutral-50);
+  --color-gray-100: var(--color-neutral-100);
+  --color-gray-200: var(--color-neutral-200);
+  --color-gray-300: var(--color-neutral-300);
+  --color-gray-400: var(--color-neutral-400);
+  --color-gray-500: var(--color-neutral-500);
+  --color-gray-600: var(--color-neutral-600);
+  --color-gray-700: var(--color-neutral-700);
+  --color-gray-800: var(--color-neutral-800);
+  --color-gray-900: var(--color-neutral-900);
+  --color-gray-950: var(--color-neutral-950);
+
+  --color-code-400: #fefcf9;
+  --color-code-600: #3c455b;
+}