无法在Rails 8 App

Question

创建您的项目：

rails new test_app
cd my-project

安装尾风CSS：

./bin/bundle add tailwindcss-ruby
./bin/bundle add tailwindcss-rails
./bin/rails tailwindcss:install

Import tailwind css to Application.tailwind.css：

@import "tailwindcss";
@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

代表页面控制器：

rails g controller pages home 开始您的构建过程：

./bin/dev

Google Chrome报告说，它找不到CSS：
获取

Http：//127.0.0.1：3000/Assets/parwindcss

net:: err_aborted 404（找不到）

Gemfile：

source "https://rubygems.org"

# Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
gem "rails", "~> 8.0.1"
# The modern asset pipeline for Rails [https://github.com/rails/propshaft]
gem "propshaft"
# Use sqlite3 as the database for Active Record
gem "sqlite3", ">= 2.1"
# Use the Puma web server [https://github.com/puma/puma]
gem "puma", ">= 5.0"
# Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails]
gem "importmap-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"
# Build JSON APIs with ease [https://github.com/rails/jbuilder]
gem "jbuilder"

# 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[ windows jruby ]

# Use the database-backed adapters for Rails.cache, Active Job, and Action Cable
gem "solid_cache"
gem "solid_queue"
gem "solid_cable"

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

# Deploy this application anywhere as a Docker container [https://kamal-deploy.org]
gem "kamal", require: false

# Add HTTP asset caching/compression and X-Sendfile acceleration to Puma [https://github.com/basecamp/thruster/]
gem "thruster", require: false

# 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 windows ], require: "debug/prelude"

  # Static analysis for security vulnerabilities [https://brakemanscanner.org/]
  gem "brakeman", require: false

  # Omakase Ruby styling [https://github.com/rails/rubocop-rails-omakase/]
  gem "rubocop-rails-omakase", require: false
end

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

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

gem "tailwindcss-ruby", "~> 4.0"

gem "tailwindcss-rails", "~> 3.3"

取代：@TailWind Directive

指令将从V4开始弃用。相反，引入了

@tailwind

Answer 1

@import "tailwindcss"

。

@TailWind Directives

-TailWindCSS V3至V4 default CSS-Fist配置而不是基于遗产JavaScript的配置

也可能需要重新评估在Compile_command中如何处理此操作。如果文件不存在，则似乎忽略了配置选项，因此对我升级不会引起任何问题。

• Source：（Rails/tailwindcss轨道）＃450：parwindcss v4-升级体验经验报告

从tailwindcss v4开始，支持CSS优先配置。如果您仍然想使用基于旧版JavaScript的配置，则可以使用

@import "tailwindcss"

CSS指令设置配置文件。

---

@config