在 Ruby on Rails 中使用 TailwindCSS 的最佳实践-JavaScript中文网-JavaScript教程资源分享门户

简介

TailwindCSS 是一款流行的前端框架，它的特点是将所有的样式都以类名的形式呈现。这种方式可以帮助开发者快速编写样式，避免自定义样式冲突的问题。本文将介绍在 Ruby on Rails 中使用 TailwindCSS 的最佳实践。

安装

首先，需要安装 TailwindCSS。可以使用 npm 进行安装：

npm install tailwindcss

安装完成后，需要在项目中新建一个配置文件 tailwind.config.js，运行以下命令生成默认配置：

npx tailwindcss init

接下来，在 app/assets/stylesheets/application.css 文件中导入所需的样式：

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

使用

HTML

在 HTML 文件中，可以直接使用 TailwindCSS 提供的类名来添加样式。例如，在 app/views/layouts/application.html.erb 中：

-- -------------------- ---- -------
--------- -----
------
  ------
    --------------------
    --- -------------- --
    --- ------------ --

    --- ------------------- -------------- ------ ----- --
    --- ------------------- ------------- --

    ---- ----------- ---
    ----- ---------------- ----------------------------------------------------------------- --
    ---- ------------ ---
  -------

  ----- --------------------
    ---- --------------- --------
      ---- ---------------- ------- ---- ------- ---------
        ---- ----------- --------------- ------
          ---- -------------
            ---- -------------------- ---- --------------
              --- ------- ---------------------- --------- --
            ------
          ------
        ------
      ------
    ------

    ------
      --- ----- --
    -------
  -------
-------

Ruby on Rails Helpers

除了直接在 HTML 中使用类名，Ruby on Rails 还提供了一些辅助方法来帮助在视图中添加 TailwindCSS 类名。以下是一些常用的辅助方法：

content_tag(tag, content = nil, options = {}, escape = true, &block)

该方法用于生成一个 HTML 标签，可以传递 tailwindcss 类名作为选项。

<%= content_tag :div, class: "bg-gray-100" do %>
  Some content here.
<% end %>

<div class="bg-gray-100">
  Some content here.
</div>

tag_options(options, escape = true)

该方法可以将 hash 类型的选项转换成字符串，以便在 HTML 标签中使用。

<%= tag.div class: "bg-gray-100" do %>
  Some content here.
<% end %>

<div class="bg-gray-100">
  Some content here.
</div>

dom_id(record[, prefix = nil])

该方法用于为 ActiveRecord 模型生成一个唯一的 ID，可以与 tailwindcss 类名结合使用。

<%= content_tag :div, class: dom_id(@user, "user") + " bg-gray-100" do %>
  <%= @user.name %>
<% end %>

<div class="user_1 bg-gray-100">
  John
</div>

自定义

除了使用默认配置，我们还可以使用自定义配置来生成我们自己的类名。在 tailwind.config.js 中，我们可以定义自己的颜色、字体、宽度等属性。

例如：

-- -------------------- ---- -------
-------------- - -
  ------ -
    ------- -
      ------- -
        -------- ----------
        ---------- ----------
      --
    --
  --
  --------- ---
  -------- ---
--

这里定义了两种颜色 primary 和 secondary。在代码中可以这样使用：

<div class="bg-primary">
  Some content here.
</div>

总结

以上是在 Ruby on Rails 中使用 TailwindCSS 的最佳实践。通过本文的介绍，希望可以帮助开发者更好地使用 TailwindCSS，提高开发效率。

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