tailwindcss v4 をinstall

saboyutaka · saboyutaka · commit b2eeda7ea381 · 2025-02-13T14:06:05.000+09:00
- bundle add cssbundling-rails - bin/rails css:install:tailwind ref: rails/cssbundling-rails#164
diff --git a/Gemfile b/Gemfile
@@ -6,6 +6,7 @@ gem "puma", ">= 5.0"
 
 gem "propshaft"
 gem "jsbundling-rails"
+gem "cssbundling-rails"
 
 # gem "solid_cache"
 # gem "solid_queue"
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -85,6 +85,8 @@ GEM
     concurrent-ruby (1.3.5)
     connection_pool (2.5.0)
     crass (1.0.6)
+    cssbundling-rails (1.4.1)
+      railties (>= 6.0.0)
     date (3.4.1)
     debug (1.10.0)
       irb (~> 1.10)
@@ -286,6 +288,7 @@ PLATFORMS
 DEPENDENCIES
   bootsnap
   brakeman
+  cssbundling-rails
   debug
   jsbundling-rails
   kamal
diff --git a/Procfile.dev b/Procfile.dev
@@ -1,2 +1,3 @@
 web: env RUBY_DEBUG_OPEN=true bin/rails server -b 0.0.0.0
 js: yarn build --watch
+css: yarn build:css --watch
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
@@ -0,0 +1 @@
+@import "tailwindcss";
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -17,12 +17,13 @@
     <link rel="icon" href="/icon.svg" type="image/svg+xml">
     <link rel="apple-touch-icon" href="/icon.png">
 
-    <%# Includes all stylesheet files in app/assets/stylesheets %>
-    <%= stylesheet_link_tag :app %>
     <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>
+    <%= stylesheet_link_tag "application" %>
   </head>
 
   <body>
-    <%= yield %>
+    <div class="container">
+      <%= yield %>
+    </div>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -2,13 +2,16 @@
   "name": "app",
   "private": true,
   "devDependencies": {
+    "@tailwindcss/cli": "^4.0.6",
     "esbuild": "^0.25.0"
   },
   "scripts": {
-    "build": "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets"
+    "build": "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets",
+    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"
   },
   "dependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.6"
   }
 }
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,3 @@`
`1`	`1`	`web: env RUBY_DEBUG_OPEN=true bin/rails server -b 0.0.0.0`
`2`	`2`	`js: yarn build --watch`
	`3`	`+css: yarn build:css --watch`