{"id":13458,"date":"2025-09-11T09:29:58","date_gmt":"2025-09-11T09:29:58","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=13458"},"modified":"2025-09-11T09:29:58","modified_gmt":"2025-09-11T09:29:58","slug":"unable-to-install-tailwind-css-in-rails-8","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/ruby-on-rails\/unable-to-install-tailwind-css-in-rails-8","title":{"rendered":"Unable to Install Tailwind on Rails 8 App"},"content":{"rendered":"<p>When working with <strong>Rails 8 and Tailwind CSS v4<\/strong>, many developers face issues like missing styles, 404 errors for Tailwind assets, or conflicts due to outdated setup commands. Below are the key reasons and the solutions.<\/p>\n<h2>1. Problem: 404 Asset Error<\/h2>\n<p>Error message:<\/p>\n<pre class=\"lang:adddarkplain\">GET http:\/\/127.0.0.1:3000\/assets\/tailwindcss net::ERR_ABORTED 404 (Not Found)<\/pre>\n<p>This happens because in Rails 8, Tailwind files are placed in a new directory structure. If you are looking for styles in the old application.tailwind.css path, Rails cannot find them.<\/p>\n<h2>2. Correct File Paths in Rails 8<\/h2>\n<ul>\n<li>Input file: app\/assets\/tailwind\/application.css<\/li>\n<li>Output file (compiled): app\/assets\/builds\/tailwind.css<\/li>\n<\/ul>\n<p>In your Rails layout (app\/views\/layouts\/application.html.erb), you should include the compiled CSS like this:<\/p>\n<pre class=\"lang:adddarkplain\">&lt;%= stylesheet_link_tag \"tailwind\", \"data-turbo-track\": \"reload\" %&gt;<\/pre>\n<h2>3. Use the New Tailwind Import<\/h2>\n<p>Older versions used:<\/p>\n<pre class=\"lang:adddarkplain\">@tailwind base;\r\n@tailwind components;\r\n@tailwind utilities;<\/pre>\n<p>In Tailwind v4, you should replace these with:<\/p>\n<pre class=\"lang:adddarkplain\">@import \"tailwindcss\";<\/pre>\n<p>This avoids conflicts with the new Rails 8 asset pipeline (Propshaft).<\/p>\n<h2>4. Installation Steps<\/h2>\n<p>Run the following commands in your project root:<\/p>\n<pre class=\"lang:adddarkplain\">bin\/bundle add tailwindcss-rails\r\nbin\/rails tailwindcss:install<\/pre>\n<p>This generates the config, sets up the correct asset paths, and creates a Procfile.dev.<\/p>\n<h2>5. Run Tailwind Watcher<\/h2>\n<p>To make Tailwind compile on file changes, start the watcher with:<\/p>\n<pre class=\"lang:adddarkplain\">bin\/rails tailwindcss:watch<\/pre>\n<p>Or run everything together (Rails + Tailwind watcher) using:<\/p>\n<pre class=\"lang:adddarkplain\">bin\/dev<\/pre>\n<h2>6. Optional: Auto-run Tailwind with Puma<\/h2>\n<p>In config\/puma.rb, add:<\/p>\n<pre class=\"lang:adddarkplain\">plugin :tailwindcss if ENV.fetch(\"RAILS_ENV\", \"development\") == \"development\"<\/pre>\n<p>This way, just running rails server will also start the Tailwind watcher.<\/p>\n<h2>7. Why This Happens in Rails 8<\/h2>\n<ul>\n<li>Rails 8 introduced <strong>Propshaft <\/strong> as the default asset pipeline.<\/li>\n<li>Tailwind v4 changed its setup to be CSS-first (@import) instead of directives (@tailwind).<\/li>\n<li>Old documentation and guides often reference outdated file names like application.tailwind.css.<\/li>\n<\/ul>\n<h3>Final Working Setup<\/h3>\n<p>Ensure you have app\/assets\/tailwind\/application.css with:<\/p>\n<pre class=\"lang:adddarkplain\">@import \"tailwindcss\";<\/pre>\n<p>Ensure application.html.erb includes:<\/p>\n<pre class=\"lang:adddarkplain\">&lt;%= stylesheet_link_tag \"tailwind\", \"data-turbo-track\": \"reload\" %&gt;<\/pre>\n<p>Run bin\/dev to start both Rails and Tailwind watchers. <\/p>\n<p>This setup will fix the \u201c<strong>Unable to install Tailwind CSS in Rails 8 App<\/strong>\u201d issue and ensure your styles compile and load correctly.<\/p>\n<div class=\"qanda-read-box\"><div class=\"bg-light read-more-icon\"><img decoding=\"async\" src=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/04\/24061434\/read-txt.png\" alt=\"Also Read\"><p><\/p><h3>Also Read:<\/h3><a href=\"https:\/\/www.bacancytechnology.com\/blog\/ruby-on-rails-gems\" target=\"_blank\">Best Ruby On Rails Gems<\/a><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>When working with Rails 8 and Tailwind CSS v4, many developers face issues like missing styles, 404 errors for Tailwind assets, or conflicts due to outdated setup commands. Below are the key reasons and the solutions. 1. Problem: 404 Asset Error Error message: GET http:\/\/127.0.0.1:3000\/assets\/tailwindcss net::ERR_ABORTED 404 (Not Found) This happens because in Rails 8, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":13459,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[11],"tags":[],"class_list":["post-13458","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ruby-on-rails"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/13458"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=13458"}],"version-history":[{"count":1,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/13458\/revisions"}],"predecessor-version":[{"id":13460,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/13458\/revisions\/13460"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/13459"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=13458"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=13458"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=13458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}