如何在 Rails 项目中使用 Tailwind CSS ？

Tailwind CSS 是一个高度可定制的 CSS 框架，适用于构建现代 Web 应用程序。在 Rails 项目中使用 Tailwind CSS，可以极大地提高前端开发效率和开发质量。

本文将介绍如何在 Rails 项目中使用 Tailwind CSS。

步骤

1. 安装 Tailwind CSS

在 Rails 项目中使用 Tailwind CSS，首先需要安装它。可以使用 NPM 或 Yarn 安装。我们将使用 Yarn 安装 Tailwind CSS。

yarn add tailwindcss

2. 初始化配置文件

在安装完 Tailwind CSS 后，需要初始化一个配置文件。可以使用以下命令初始化一个 Tailwind CSS 配置文件。

npx tailwindcss init

此命令将在项目根目录下创建一个名为 tailwind.config.js 的文件，其中包含基本的配置选项。

3. 创建样式表

接下来，需要创建一个样式表来包含 Tailwind CSS 样式。可以使用以下命令创建一个名为 application.css 的文件。

touch app/assets/stylesheets/application.css

在 application.css 文件中，添加以下代码来引入 Tailwind CSS 样式表。

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

4. 编译样式表

在 Rails 项目中，需要使用 asset pipeline 来编译样式表。可以使用以下命令来编译样式表。

RAILS_ENV=production bundle exec rake assets:precompile

5. 在页面中使用样式表

最后，需要在页面中使用样式表。可以在应用布局文件中添加以下代码来引入样式表。

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

现在，可以在页面中使用 Tailwind CSS 样式了。

示例代码

安装 Tailwind CSS

yarn add tailwindcss

初始化配置文件

npx tailwindcss init

创建样式表

touch app/assets/stylesheets/application.css

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

编译样式表

RAILS_ENV=production bundle exec rake assets:precompile

在页面中使用样式表

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

总结

本文介绍了如何在 Rails 项目中使用 Tailwind CSS。首先安装了 Tailwind CSS，然后初始化了配置文件。接着，创建了样式表，并编译了样式表。最后，在页面中使用了样式表。

使用 Tailwind CSS 可以提高前端开发效率和开发质量。希望本文能对读者在 Rails 项目中使用 Tailwind CSS 有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645af1bd968c7c53b0d4c672