CODEWITHSUNDEEP
ruby-on-railstailwind-cssruby-on-rails-7
Melanie Anderson
Melanie Anderson

Reputation: 91

Ruby on Rails 7.0.1 and Tailwind 3, tailwind classes are not being displayed in the browser

I'm trying to set up my rails project with tailwind, but none of the actual tailwind changes are showing up in the browser. In devtools the class is displayed, but it doesn't make any change in the browser (the background is not red). RoR version is 7.0.1, Tailwindcss is 3.0.13, and Ruby is 2.7.2. I set it up following https://www.youtube.com/watch?v=JsNtLiph87Y and here is my tailwind.config:

module.exports = {
  content: [
    './app/views/**/*.html.erb',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js'
  ],
  mode: 'jit',
}

here is my Gemfile:

source "https://rubygems.org"
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby "2.7.2"

# Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
gem "rails", "~> 7.0.1"

# The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
gem "sprockets-rails"

# Use postgresql as the database for Active Record
gem "pg", "~> 1.1"

# Use the Puma web server [https://github.com/puma/puma]
gem "puma", "~> 5.0"

# Bundle and transpile JavaScript [https://github.com/rails/jsbundling-rails]
gem "jsbundling-rails"

# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
gem "turbo-rails"

# Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
gem "stimulus-rails"

# Bundle and process CSS [https://github.com/rails/cssbundling-rails]
gem "cssbundling-rails"

# Build JSON APIs with ease [https://github.com/rails/jbuilder]
gem "jbuilder"

# Use Redis adapter to run Action Cable in production
gem "redis", "~> 4.0"

# Use Kredis to get higher-level data types in Redis [https://github.com/rails/kredis]
# gem "kredis"

# Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword]
# gem "bcrypt", "~> 3.1.7"

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem "tzinfo-data", platforms: %i[ mingw mswin x64_mingw jruby ]

# Reduces boot times through caching; required in config/boot.rb
gem "bootsnap", require: false

# Use Sass to process CSS
# gem "sassc-rails"

# Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
# gem "image_processing", "~> 1.2"

group :development, :test do
  # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
  gem "debug", platforms: %i[ mri mingw x64_mingw ]
end

group :development do
  # Use console on exceptions pages [https://github.com/rails/web-console]
  gem "web-console"

  # Add speed badges [https://github.com/MiniProfiler/rack-mini-profiler]
  # gem "rack-mini-profiler"

  # Speed up commands on slow machines / big apps [https://github.com/rails/spring]
  # gem "spring"
end

group :test do
  # Use system testing [https://guides.rubyonrails.org/testing.html#system-testing]
  gem "capybara"
  gem "selenium-webdriver"
  gem "webdrivers"
end

here is my application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Nekonomicon</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

and here is the Home index page (route is home#index) index.html.erb

<div class="bg-red-500">HELP</div>

The HELP is displaying but not the background

Upvotes: 9

Views: 11629

Answers (8)

gcordero
gcordero

Reputation: 16

In my case I needed a combination of some answers here.

First, having config.assets.debug = true in the config/environments/development.rb file.

Then, I needed plugin :tailwindcss if ENV.fetch("RAILS_ENV", "development") == "development" on the puma.rb file. This way it runs the application and runs Tailwind running on "watch" mode.

I have ruby 3.3.4, rails 7.1.5 and node 20.18.0 versions.

See https://stackoverflow.com/a/78393579/12955733 and https://stackoverflow.com/a/78250287/12955733.

Upvotes: 0

Kaka Ruto
Kaka Ruto

Reputation: 5125

I uncovered the issues I had by setting config.assets.debug = true in config/environments/development.rb and restarting the server! It reported all issues I had with my assets which I then fixed.

More here: https://stackoverflow.com/a/78393577/6488361

Upvotes: 1

Deepak Reddy
Deepak Reddy

Reputation: 11

Use Live rebuild

While you're developing your application, you want to run Tailwind in "watch" mode, so changes are automatically reflected in the generated CSS output. You can do this use this gem's Puma plugin to integrate "watch" with rails server. To use it, add this line to your puma.rb configuration:

plugin :tailwindcss if ENV.fetch("RAILS_ENV", "development") == "development"

and then running rails server will run the Tailwind watch process in the background.

Reference: Tailwind CSS for Rails

Upvotes: 1

eth3rnit3
eth3rnit3

Reputation: 801

Don't forget to add stylesheet tag to application layout if you install Tailwind manually

<%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>

Upvotes: 4

Greg
Greg

Reputation: 6628

in development you can use

rails tailwindcss:watch

https://github.com/rails/tailwindcss-rails#update-assets-automatically

Upvotes: 3

Jorge Ort&#237;z
Jorge Ort&#237;z

Reputation: 1

I had the same issue and the only thing that I needed to do was run:

rails tailwindcss:build

Upvotes: 0

Dmitry Lysenko
Dmitry Lysenko

Reputation: 191

You have to rebuild your css by command:

rails tailwindcss:build

Or try to use hotwire-livereload gem for live reloading

Upvotes: 6

Michael Trojanek
Michael Trojanek

Reputation: 1943

Running rake tailwindcss:build may solve the problem, but you would not want to do that after every change of a HTML class.

What you should do instead is starting your development webserver with bin/dev (instead of rails server) which will use Foreman to not only start Puma but also make Tailwind listen for changes in your CSS and (re)build the CSS file on the fly.

Upvotes: 25

Related Questions