DEV Community
·
在新的Rails 8应用中设置Tailwind CSS
💡
原文英文，约400词，阅读约需2分钟。
📝
内容提要
在Rails 8应用中设置Tailwind CSS的过程包括创建应用、安装tailwindcss-rails gem、运行安装任务生成样式表和配置文件，以及使用tailwind:watch任务监控更改以自动重建前端资产，步骤简单明了。
🎯
关键要点
- 在Rails 8应用中创建新应用的命令是rails new tailwindcss_demo。
- 可以通过在rails new命令中添加--css=tailwind选项来自动设置Tailwind，但如果已有应用，则需手动添加。
- 安装tailwindcss-rails gem以集成Tailwind，需在Gemfile中添加并运行bundle install。
- 运行bin/rails tailwindcss:install命令以生成必要的文件，包括Tailwind样式表和配置文件。
- Tailwind样式表位于app/assets/stylesheets/application.tailwind.css中，可以在此添加样式。
- 生成的Tailwind配置文件位于config/tailwind.config.js中，包含内容和主题设置。
- 安装过程还设置了tailwind:watch任务，自动监控更改并重建前端资产。
- 使用foreman start命令启动Rails应用时，tailwind:watch任务将与Rails服务器一起运行。
- 设置Tailwind CSS的过程简单明了，使用tailwindcss-rails gem可以快速完成。
❓
延伸问答
如何在Rails 8应用中创建新应用并设置Tailwind CSS？
使用命令rails new tailwindcss_demo创建新应用，并可以通过添加--css=tailwind选项自动设置Tailwind。
如何手动在已有的Rails应用中添加Tailwind CSS？
在Gemfile中添加tailwindcss-rails gem并运行bundle install，然后执行bin/rails tailwindcss:install命令。
Tailwind CSS的样式表和配置文件生成在哪里？
Tailwind样式表位于app/assets/stylesheets/application.tailwind.css，配置文件位于config/tailwind.config.js。
如何监控Tailwind CSS的更改并自动重建前端资产？
使用tailwind:watch任务，该任务会与Rails服务器一起运行，自动监控更改并重建前端资产。
使用tailwindcss-rails gem设置Tailwind CSS的优势是什么？
使用tailwindcss-rails gem可以快速、简单地将Tailwind CSS集成到Rails应用中，简化了设置过程。
如何启动Rails应用并同时运行Tailwind的监控任务？
使用foreman start命令启动Rails应用，tailwind:watch任务将与Rails服务器一起运行。
➡️
