在现代化 Web 应用开发中，构建美观和易于维护的 UI 是至关重要的。TailwindCSS 是一个功能强大的 CSS 框架，它的灵活性和可重用性使得我们可以快速轻松地构建自定义的用户界面。Ruby on Rails 是一个流行的 Web 开发框架，它支持强大的模板和视图系统。在本文中，我们将讨论如何在 Ruby on Rails 项目中集成 TailwindCSS，以实现更好的用户体验。
步骤
- 安装 TailwindCSS
要开始使用 TailwindCSS，我们需要将它添加到 Rails 应用中。为此，我们可以使用 npm 或 Yarn 安装 TailwindCSS 的依赖项。我们需要运行以下命令：
npm install tailwindcss
我们还需要运行以下命令以生成 tailwind.config.js 文件：
npx tailwindcss init
这将生成一个默认的配置文件，我们可以根据需要进行自定义。
- 集成 TailwindCSS
在我们的项目中集成 TailwindCSS 的最佳方法是通过 webpacker。我们需要在 Gemfile 中添加 webpacker gem：
gem 'webpacker', '~> 4.0'
然后，运行以下命令安装 webpacker：
bundle install
接下来，运行以下命令以启用 webpacker：
rails webpacker:install
这将生成我们需要的各种文件和目录。
- 创建样式表
现在，我们需要创建一个新的样式表，以便添加 TailwindCSS 样式。我们可以使用以下命令创建一个名为 application.css 的新文件：
touch app/javascript/stylesheets/application.css
然后，我们需要使用以下内容填充样式表：
@import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities';
- 配置 webpacker
我们需要配置 webpacker，以便在项目中使用样式表。我们需要编辑 config/webpack/environment.js 文件，将以下内容添加到其中：
const { environment } = require('@rails/webpacker')
const tailwindcss = require('tailwindcss')
environment.plugins.prepend('Tailwind', tailwindcss('./tailwind.config.js'))
module.exports = environment- 引入样式表
现在，让我们在我们的应用程序中引入样式表。我们需要打开 app/javascript/packs/application.js 文件并添加以下内容：
import '../stylesheets/application'
- 打包应用程序
我们需要重新打包我们的应用程序以包含新的样式表。我们可以运行以下命令：
rails webpacker:compile
- 结果
现在，我们已经成功地在我们的 Ruby on Rails 项目中集成了 TailwindCSS！我们可以在我们的视图中使用 TailwindCSS 样式了。例如，我们可能想使用 TailwindCSS 样式为按钮添加样式。可以使用以下代码：
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> Sign In </button>
这将创建一个带有蓝色背景和圆角的登录按钮。
总结
在本文中，我们讨论了如何在 Ruby on Rails 项目中集成 TailwindCSS。我们需要安装 TailwindCSS，并使用 webpacker 集成它。最后，我们可以使用 TailwindCSS 样式为我们的应用程序添加自定义的用户界面。这是一个非常简单的过程，它将为我们的项目带来巨大的好处。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64831b9048841e9894288757