From 0fb31fa03895e348a0b020ae35275c041f0ec5ea Mon Sep 17 00:00:00 2001 From: dadachi Date: Fri, 3 Apr 2026 09:12:29 +0900 Subject: [PATCH] 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) --- Gemfile | 2 +- Gemfile.lock | 17 ++-- .../stylesheets/application.tailwind.css | 3 - app/assets/tailwind/application.css | 81 +++++++++++++++++++ config/tailwind.config.js | 57 ------------- 5 files changed, 90 insertions(+), 70 deletions(-) delete mode 100644 app/assets/stylesheets/application.tailwind.css create mode 100644 app/assets/tailwind/application.css delete mode 100644 config/tailwind.config.js diff --git a/Gemfile b/Gemfile index 3abaad7..d3f3895 100644 --- a/Gemfile +++ b/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 diff --git a/Gemfile.lock b/Gemfile.lock index 0537584..a5973ff 100644 --- a/Gemfile.lock +++ b/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 diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css deleted file mode 100644 index 76fcadc..0000000 --- a/app/assets/stylesheets/application.tailwind.css +++ /dev/null @@ -1,3 +0,0 @@ -@import "tailwindcss/base"; -@import "tailwindcss/components"; -@import "tailwindcss/utilities"; diff --git a/app/assets/tailwind/application.css b/app/assets/tailwind/application.css new file mode 100644 index 0000000..593c081 --- /dev/null +++ b/app/assets/tailwind/application.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; +} diff --git a/config/tailwind.config.js b/config/tailwind.config.js deleted file mode 100644 index 7461c6f..0000000 --- a/config/tailwind.config.js +++ /dev/null @@ -1,57 +0,0 @@ -// See the Tailwind default theme values here: -// https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js -const colors = require('tailwindcss/colors') -const defaultTheme = require('tailwindcss/defaultTheme') - -/** @type {import('tailwindcss').Config */ -module.exports = { - plugins: [ - require('@tailwindcss/aspect-ratio'), - require('@tailwindcss/forms'), - require('@tailwindcss/typography'), - ], - - content: [ - './app/components/**/*.rb', - './app/helpers/**/*.rb', - './app/javascript/**/*.js', - './app/views/**/*.erb', - './app/views/**/*.haml', - './app/views/**/*.slim', - ], - - // All the default values will be compiled unless they are overridden below - theme: { - // Extend (add to) the default theme in the `extend` key - extend: { - screens: { - '3xl': '1792px', - '4xl': '2048px', - '5xl': '2304px', - '6xl': '2560px', - '7xl': '2816px', - '8xl': '3072px', - '9xl': '3328px', - '10xl': '3584px', - '11xl': '3840px', - }, - // Create your own at: https://javisperez.github.io/tailwindcolorshades - colors: { - primary: colors.blue, - secondary: colors.emerald, - tertiary: colors.gray, - danger: colors.red, - gray: colors.neutral, - "code-400": "#fefcf9", - "code-600": "#3c455b", - }, - fontFamily: { - sans: ['Inter', ...defaultTheme.fontFamily.sans], - }, - }, - }, - - // Opt-in to TailwindCSS future changes - future: { - }, -}