Ruby on Rails 7.0.1 和 Tailwind 3，tailwind 类未显示在浏览器中答案

【问题标题】：Ruby on Rails 7.0.1 and Tailwind 3, tailwind classes are not being displayed in the browserRuby on Rails 7.0.1 和 Tailwind 3，tailwind 类未显示在浏览器中
【发布时间】：2022-02-02 17:16:47
【问题描述】：

我正在尝试使用 tailwind 设置我的 rails 项目，但浏览器中没有显示任何实际的顺风更改。在 devtools 中显示了该类，但它在浏览器中没有进行任何更改（背景不是红色）。 RoR 版本是 7.0.1，Tailwindcss 是 3.0.13，Ruby 是 2.7.2。我按照https://www.youtube.com/watch?v=JsNtLiph87Y 设置它，这是我的tailwind.config：

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

这是我的 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

这是我的 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>

这里是首页索引页面（路由是home#index）index.html.erb

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

帮助正在显示，但不是背景

【问题讨论】：

你运行的是什么版本的Node？span>

标签： ruby-on-rails tailwind-css ruby-on-rails-7

【解决方案1】：

运行rake tailwindcss:build 可能会解决问题，但您不希望在每次更改 HTML 类后都这样做。

您应该做的是使用 bin/dev（而不是 rails server）启动您的开发网络服务器，这将使用 Foreman 不仅启动 Puma，而且使 Tailwind 监听您的 CSS 中的更改并（重新）构建 CSS即时文件。

【讨论】：

安装 gem 后运行 rake 命令对我有用。

【解决方案2】：

你必须通过命令重建你的 css：

rails tailwindcss:build

或者尝试使用hotwire-livereloadgem进行实时重载

【讨论】：

这并没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方留下评论。 - From Review
添加可以解决问题的实时重新加载选项