什么是 Tailwind CSS？
Tailwind CSS 是一个用于构建用户界面的现代化 CSS 框架。它不是一个 UI 组件库，而是一个工具箱，可以提供大量的 CSS 类和实用程序来构建高度可定制的用户界面。
它的最大特点是使用“原子类”，即单一 CSS 类来完成一个具体的样式，而不是一个 CSS 规则。这种方式可以让开发者非常方便地组合多个不同的样式，从而快速构建出需要的界面。
怎么使用 Tailwind CSS？
首先安装 Tailwind CSS：
- -- --- -- --- ------- ----------- - -- ---- -- ---- --- -----------
然后在项目的 CSS 文件中引入 Tailwind CSS：
------- ------------------- ------- ------------------------- ------- ------------------------
最后，在 HTML 文件的元素中添加对应的 CSS 类：
---- ------------------ --- ---------- -----------
--- --------------- ----------------- -----------
-- ----------- ------------------- -- - -------- --- ------------
------这个例子中，bg-gray-200 表示背景色为淡灰色，p-4 表示内边距为 4 个“单位”（见下文），rounded-lg 表示边框圆角程度为“大”，shadow-md 表示带有阴影效果。
Tailwind CSS 的一些注意点
单位
Tailwind CSS 中使用的单位不是 px 或 em 等传统单位，而是一系列“单位”（utility），每个单位对应一个特定像素值。例如：
1对应 0.25rem2对应 0.5rem3对应 0.75rem4对应 1rem
可以在配置文件中修改这些单位对应的像素值。
自定义样式
尽管 Tailwind CSS 提供了非常丰富的样式类，但有时候用户仍然需要自定义一些样式。这时候可以在配置文件中添加自定义的类，例如：
-------------- - -
------ -
------- -
------- -
------- ---------
--
-------- -
----- -------
-
-
--
--------- ---
-------- --
-这个例子中，添加了一个名为“mygray”的颜色值，以及一个名为“80”的 spacing 单位。
响应式设计
Tailwind CSS 也提供了适用于不同屏幕尺寸的样式类。例如：
---- ------------------ --- ------ --------
--- --------------- ----------------- -----------
-- ----------- ------------------- -- - -------- --- ------------
------这个例子中，p-4 表示在所有屏幕尺寸下内边距为 4，“md:p-6” 表示在中等屏幕尺寸下内边距为 6，“lg:p-8” 表示在大屏幕尺寸下内边距为 8。
需要注意的是，这些样式类是按照一定顺序来覆盖的，例如：
---- -------------- ---------- -------------
------ ------
------这里的样式类中，同一个属性（text）出现了三个不同的值。这时候，如果屏幕尺寸为中等，则使用 text-lg；如果屏幕尺寸为大，则使用 text-2xl；否则使用 text-sm。
样式重载
在实际使用中，用户可能需要覆盖一些 Tailwind CSS 的默认样式。由于 Tailwind CSS 使用的是“原子类”，覆盖样式时需要注意：
- 避免使用
.classname {...}这样的传统 CSS 样式定义，应该优先考虑使用.classname:xxx {...}的方式，这样可以保证只覆盖特定的样式。 - 覆盖样式时应该将其放在 Tailwind CSS 引入之后，这样才能生效。
总结
Tailwind CSS 是一款非常强大的 CSS 工具箱，可以帮助开发者快速构建可定制的用户界面。在使用时需要注意一些特点，例如以“原子类”来定义样式、使用特定的“单位”而非传统的 px、以及响应式样式的顺序。同时也需要灵活地解决一些覆盖默认样式的问题。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64a51c4348841e989418f21e