在现代 Web 开发中，CSS 是构建网站或应用程序的重要组成部分。然而，编写 CSS 代码是一项繁琐且容易出错的工作，特别是当你需要在不同的浏览器和设备上测试你的网站时。为了解决这个问题，TailwindCSS 在前端开发中崭露头角。
TailwindCSS 是一个高度可定制的 CSS 框架，它通过一系列的 CSS 类来构建 UI 组件和布局。这种方法使得开发者可以快速构建出漂亮的 UI，而无需写很多 CSS 代码。当然，这也意味着你需要学习一些新的类名和 CSS 属性。
在本文中，我们将介绍如何在 Rails 中使用 TailwindCSS。我们将讨论如何配置 Rails 应用程序以使用 TailwindCSS，如何在视图中使用 TailwindCSS 类，以及如何在 Rails 中使用 TailwindCSS 辅助函数。
配置 Rails 应用程序以使用 TailwindCSS
首先，让我们在 Rails 应用程序中安装 TailwindCSS。我们可以通过 Yarn 或 NPM 安装 TailwindCSS：
yarn add tailwindcss
或者
npm install tailwindcss
接下来，让我们创建一个名为 tailwind.config.js 的配置文件。这个文件定义了 TailwindCSS 的配置选项，例如颜色、字体和间距：
-- -------------------- ---- -------
-------------- - -
------ ---
--------- ------ -- -- ------- -- -------
------ -
------- ---
--
--------- -
------- ---
--
-------- ---
-接下来，我们需要创建一个 CSS 文件来包含 TailwindCSS 类。在 app/assets/stylesheets 目录下创建一个名为 tailwind.css 的文件，然后将以下代码添加到文件中：
@tailwind base; @tailwind components; @tailwind utilities;
这将包含 TailwindCSS 的基本样式、组件和实用程序类。最后，我们需要将 TailwindCSS 样式表添加到 Rails 应用程序中。在 app/assets/stylesheets 目录下创建一个名为 application.scss 的文件，然后将以下代码添加到文件中：
@import "tailwind";
这将将 TailwindCSS 样式表添加到我们的应用程序中。
在视图中使用 TailwindCSS 类
现在，我们已经配置了 Rails 应用程序以使用 TailwindCSS，我们可以在视图中使用 TailwindCSS 类来构建 UI 组件和布局。例如，我们可以创建一个简单的导航栏：
-- -------------------- ---- -------
---- --------------------
---- ---------------- ------- ---- ------- ---------
---- --------------- ---- ------------ --------------- ------
---- --------------- --------- ------ ---- ------------ -----------
-------
-------------
------------------ ------------ -------------- --- ---------- ------------- ---------------- ----------------- ------------------ ------------ ---------------- -----------------
---------------------------
---------------------
-
----- -------------------- ---- -----------
---- -------- ----- ---- ---
----
------------ --- ----
----------------------------------
-----------
---------- - -- ---
---------------------
------------------
-
-----
----------------------
-----------------------
----------------
----- ------ ------- ------
--
------
---- -------- ----- - ---
----
------------- --- ----
----------------------------------
-----------
---------- - -- ---
---------------------
------------------
-
-----
----------------------
-----------------------
----------------
----- ----- --- ---- ---
--
------
---------
------
---- ------------- ---- ------------ -------------- ---------------- ------------------
---- -------------------- ---- --------------
---- ------------ --------- --- ------- ------------------------------------------------------------------- ---------------
---- ------------- -------- --- ------- ------------------------------------------------------------------- ---------------
------
---- ------------- -------- ---------
---- ----------- -----------
-- -------- ------------------ ---------- ---- ---- ---------- ------- --------------------------
-- -------- -------------------- ----------------- ---------------- ---- ---- ---------- ------- ---------------------
-- -------- -------------------- ----------------- ---------------- ---- ---- ---------- ------- -------------------------
-- -------- -------------------- ----------------- ---------------- ---- ---- ---------- ------- -------------------------
------
------
------
---- ----------- --------------
------- ------------------ --- ------------ ------------- ---------------- ------------------ ------------ ------------------- -------------------------- ------------------
----- -------------------- --------------------
---- -------- ----- ---- ---
---- ---------- ---- ---------------------------------- ----------- ---------- - -- --- --------------------- -------------------
----- ---------------------- ----------------------- ---------------- ------ ------ ---------------- --
------
---------
---- ------- -------- ---
---- ----------- ----------
-----
-------
--------------- ----------- ------------ ---- ------------ ------- ------------------ ------------ ------------------- -------------------------- -----------------
--------------
--------------------
-
----- -------------------- ---- -----------
---- ---------- --- ------------- --------------------------------------------------------- -------
---------
------
----
------- -------- ------ --------- ----- -- -------- ------
--------- ----------- -------- -------------
----- ---------- --------- ---------
--- ---------- ----------- ----------
-------- ----------- ------- ------------
----- ---------- ----------- ----------
--- ---------- --------- ---------
---
----
------------- ---------------- -------- ------- ---- ---- ---------- --------- ---- -------- ------ ---------- ---------------
-----------
---------------------------
---------------------------
-
-- -------- ------------ ---- ---- ------- ------------- ------------------ -------------------- -----------
-- -------- ------------ ---- ---- ------- ------------- ------------------ ----------------------------
-- -------- ------------ ---- ---- ------- ------------- ------------------ -------------------- -------
------
------
------
------
------
---- ------ ----- --------- ----- -- ---- ------ ---
---- ----------------- -----------------
---- ----------- ---- ---- -----------
-- -------- ------------------ ---------- ----- ---- ---- ---------- --------- --------------------------
-- -------- -------------------- ----------------- ---------------- ----- ---- ---- ---------- --------- ---------------------
-- -------- -------------------- ----------------- ---------------- ----- ---- ---- ---------- --------- -------------------------
-- -------- -------------------- ----------------- ---------------- ----- ---- ---- ---------- --------- -------------------------
------
------
------在上面的代码中，我们使用了很多 TailwindCSS 类来构建导航栏。例如，我们使用了 bg-gray-800 类来设置导航栏的背景颜色，使用 max-w-7xl 类来限制导航栏的宽度，使用 sm:hidden 类在小屏幕上隐藏某些元素等等。
在 Rails 中使用 TailwindCSS 辅助函数
除了在视图中使用 TailwindCSS 类之外，我们还可以在 Rails 中使用 TailwindCSS 辅助函数。这些函数可以帮助我们更轻松地创建一些常见的 UI 组件。
例如，我们可以使用 button_tag 辅助函数来创建一个带有样式的按钮：
<%= button_tag "Click me", class: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" %>
在上面的代码中，我们使用了 bg-blue-500 类来设置按钮的背景颜色，使用 hover:bg-blue-700 类来设置鼠标悬停时的背景颜色，使用 text-white 类来设置文本颜色等等。
除了 button_tag 之外，Rails 还提供了许多其他的 TailwindCSS 辅助函数，例如 link_to、form_for、form_tag 等等。
结论
在本文中，我们介绍了如何在 Rails 中使用 TailwindCSS。我们讨论了如何配置 Rails 应用程序以使用 TailwindCSS，如何在视图中使用 TailwindCSS 类，以及如何在 Rails 中使用 TailwindCSS 辅助函数。使用 TailwindCSS，我们可以更快地构建出漂亮的 UI，而无需写很多 CSS 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6779750e381bbe667f92e86c