Tailwind CSS 是一个快速构建用户界面的工具箱，它提供了大量 CSS 类，可以让你快速创建美观而且高度可定制的样式。在 Taro 中使用 Tailwind CSS 可以快速实现一致的 UI 风格，并且不需要手写大量样式代码。本文将详细介绍如何在 Taro 中使用 Tailwind CSS。
安装
在 Taro 中使用 Tailwind CSS 首先需要安装相关依赖：
npm install tailwindcss postcss postcss-cli postcss-pxtransform taro-postcss-plugin --save-dev
安装完成后，需要创建一个 postcss.config.js 文件，并将以下代码添加到该文件中：
-- -------------------- ---- -------
-------------- - -
-------- -
-----------------------------------------------
--------------------------------
--------- --------
------------ ----
---
--
--然后，在 config/index.js 中将 postcss 配置修改如下：
-- -------------------- ---- -------
-------- -
-------- -
-------- -
--------------------------------
--------- --------
------------ ----
---
----------------------------------------------
-
-
-这些都设置好了之后，就可以在 Taro 代码中使用 Tailwind CSS 了。
在 Taro 中使用 Tailwind CSS
在 Taro 中使用 Tailwind CSS，需要在 JSX 中添加 Tailwind CSS 的 classname。比如，要添加一个居中的 div，只需要添加以下代码：
<div className="flex justify-center items-center h-screen text-lg text-gray-500">Hello, Tailwind CSS!</div>
这里的 flex 表示弹性布局，justify-center 和 items-center 表示水平和垂直方向居中，h-screen 表示高度占据整个屏幕，text-lg 表示字体大小为大号，text-gray-500 表示字体颜色为灰色。
除了使用现成的 classname，也可以自定义 classname，只需要在 tailwind.config.js 文件中修改相关配置即可。比如，可以添加一个自定义的 bg-logo classname：
-- -------------------- ---- -------
-------------- - -
------ -
------- -
---------------- -
------- ----------------------------
-
-
--
--------- ---
-------- ---
-然后就可以在 JSX 中使用 bg-logo classname 了：
<div className="bg-logo"></div>
将 Tailwind CSS 与 CSS Modules 结合
如果要将 Tailwind CSS 与 CSS Modules 结合使用，需要在 tailwind.config.js 中添加以下配置：
-- -------------------- ---- -------
-------------- - -
------ -
------- -
--------- -
----- -------
------- -------
----- -------
----- -------
--
--
--
--------- ---
-------- ---
------- ------
--然后，在 postcss.config.js 文件中添加以下代码：
-- -------------------- ---- -------
-------------- - -
-------- -
-----------------------------------------------
----------------------------
------------------- ------------------------------------
-------- -- -- ---
---
--------------------------------
--------- --------
------------ ----
---
--
--这时，在 JSX 中使用 classname，需要使用 tw 前缀，比如：
<div className={styles['tw-bg-gray-200']}></div>常用 classname
Tailwind CSS 提供了大量的 classname，以下是一些常用的 classname：
| classname | 说明 |
|---|---|
w-[size] |
宽度 |
h-[size] |
高度 |
m-[size] |
外边距 |
p-[size] |
内边距 |
bg-[color] |
背景色 |
text-[color] |
字体颜色 |
text-[size] |
字体大小 |
font-[name] |
字体 |
flex |
弹性布局 |
justify-[type] |
主轴对齐方式 |
items-[type] |
交叉轴对齐方式 |
flex-wrap |
换行 |
block |
显示为块级元素 |
inline-block |
显示为内联块元素 |
hidden |
隐藏元素 |
border-[size] |
边框大小 |
border-[color] |
边框颜色 |
rounded-[size] |
圆角大小 |
shadow |
阴影 |
hover:[classname] |
悬浮状态下添加 classname |
focus:[classname] |
获取焦点状态下添加 classname |
active:[classname] |
激活状态下添加 classname |
结论
在 Taro 中使用 Tailwind CSS 可以有效地提升开发效率，同时保持样式的一致性。通过本文的介绍，你可以快速了解如何在 Taro 中使用 Tailwind CSS，并对一些常用 classname 进行使用。建议在实际开发中结合实际使用情况进一步优化样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673191490bc820c582394bfc