如果您正在构建一个 React 应用程序，并且想要为其添加自定义 CSS 样式，那么 Tailwind CSS 可能是您需要的工具。Tailwind CSS 是一个功能强大的 CSS 框架，可帮助前端开发人员更快速且更有效地设计应用程序样式。
在本文中，我们将学习如何使用 Tailwind CSS 为您的 React 应用程序添加自定义 CSS。
为您的 React 应用添加 Tailwind CSS
要开始使用 Tailwind CSS，您需要先将其添加到您的 React 应用程序中。您可以通过以下命令使用 npm 安装 Tailwind CSS：
npm install tailwindcss
此时，即可在您的项目中使用 Tailwind CSS 。
创建您的自定义 Tailwind CSS 样式
一旦您将 Tailwind CSS 添加到您的应用程序中，您就可以使用该框架的所有样式了。但是，如果您想为您的应用程序添加自定义的样式，您需要创建一个自定义的 Tailwind CSS 配置文件。
首先，创建一个新的 tailwind.config.js 文件，并为您的自定义样式添加 base、components 和 utilities。例如：
-- -------------------- ---- -------
-------------- - -
------ -
------------------
----------------
-----------------
----------------
-----------------
--------------------
--
------ -
------- -
--------- -
----- ----------
----- ----------
--
------- -
-------- ---------
-
--
--
--------- -
------- ---
--
-------- ---
-上述配置文件中，我们添加了三个自定义样式内容，分别为：base、component 和 utilities。其中 base 包含了重置样式，component 包含了所有组件的样式，utilities 包含了实用程序类，例如边距、内填充、文本样式等。
在 React 应用程序中使用自定义样式
一旦您创建了自定义 Tailwind CSS 样式，您可以将其应用于您的 React 应用程序中。为此，您需要使用 className 属性将 Tailwind CSS 类名应用到您的 React 元素中。
例如，如果要将 Tailwind CSS primary 颜色应用于按钮，请在您的 JSX 代码中添加以下内容：
<button className="bg-primary text-white font-bold py-2 px-4 rounded"> Primary Button </button>
上述代码中，我们向 className 属性中添加了一些 Tailwind CSS 类名来定义背景颜色、字体颜色、字体粗细、填充等属性。
如果您想更灵活地使用自定义样式，您可以在 JavaScript 中编写样式，然后将其与 className 属性进行混合。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------
------ -- ---- ------------
-------- ----- -
------ -
---- --------------- ---- ------------ -------------- ----------
---- ------------ --- ------- ------------
--- ------------- ------------- -------- ------------- ------------------ -- -- ---------
-- -------- ----------------------- --- --- ---------
------- ------------- ---- ----------- ---------- ------- ------------- ---- ---- ---------- -------------- ----------------- ------------------- ------------------ --------------------------- ------------------
------
------
--
-
------ ------- ----上述代码中，我们使用 twin.macro 库在 JavaScript 中编写了 Tailwind CSS 样式，然后使用 tw 属性来混合样式。
结论
Tailwind CSS 是一个非常强大的工具，可以帮助您更快速、更高效地创建自定义 CSS 样式。在 React 应用程序中使用 Tailwind CSS 时，只需添加相应的包并创建自定义 CSS 配置即可。随后，您可以使用 className 属性来将样式应用到您的 React 元素中，并用 tw 混合样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6729d87c2e7021665e25d5db