Tailwind CSS 是一个定制化程度非常高的 CSS 框架，它允许你通过描述性类来快速构建样式，并且是一种原子化 CSS 的实现。它可以大幅提高我们的 CSS 开发速度以及代码可复用性，避免了重复造轮子的问题。本文将介绍此框架的基本概念、使用方法及其优点，帮助读者更快的使用 Tailwind CSS 进行开发。
基本概念
Tailwind CSS 中的样式类都以原子方式来命名，这些样式类大多是由一些相对独立的 CSS 属性组成的，方便我们选择和管理。
例如，下面是一些常见的样式类：
bg-red-500：设定背景颜色为暗红色text-center：设置文字对齐方式为居中对齐py-4：同事设定上下内边距为 4。p-4：同时设定上下左右内边距为 4。
这些类名中的语义信息具有可读性，方便我们快速理解样式的作用。
使用方法
使用 Tailwind CSS 有两种方式：第一种是通过引入 CDN，直接使用 Tailwind CSS 的 CDN 地址即可。
<link rel="stylesheet" href="https://cdn.tailwindcss.com/dist/tailwind.min.css">
另一种方法是使用 npm 安装。
npm install tailwindcss
安装完成后，我们可以在项目目录下找到 node_modules/tailwindcss：
-- -------------------- ---- -------
--- -----------
--- -------
---- -----------------
--- ------------
--- -----------------
--- ---------
--- ---
--- ----
--- ---------------
--- ---------我们需要在项目中创建一个配置文件，它告诉 Tailwind CSS 如何生成 css 样式的数据表，从而让我们可以方便的使用这些原子化样式。
npx tailwind init
该命令会创建一个名为 tailwind.config.js 的配置文件，其中包括所有的默认配置。
打开 tailwind.config.js 文件并调整我们需要的配置项：
-- -------------------- ---- -------
-------------- - -
----- ------
------ ------------------- -----------------
--------- ------ -- -- ------- -- -------
------ -
------- ---
--
--------- -
------- ---
--
-------- ---
-其中，比较重要的是 purge 属性，它表示我们确定 Tailwind 需要考虑哪些文件来提取和压缩样式。这是优化生产体积的关键一步。
优点
相较于其它 CSS 框架，Tailwind CSS 的核心竞争力在于其对 HTML 语义的优化：通过与 HTML 合作，优化两者之间的交互关系，最完美地满足开发者对应的需求。
通过使用 Tailwind CSS，我们不仅可以避免不必要的 CSS 代码，还可以更快速的构建出所需的样式，提高开发效率。同时，它又很好的平衡了 CSS 可读性、复用性和代码维护成本三个因素，简化了前端样式开发流程。
经验总结
为使用 Tailwind CSS 提供帮助，我们这里总结几个开发经验：
- 将 Tailwind 作为项目中基础的样式，可以加快开发速度。
- 如果有一些常用的样式被使用多次，可以设置公共类，尽量避免重复代码。
- 注意区分 Tailwind CSS 和组件、模板框架的区别，不要在 CSS 样式文件中直接修改样式文件。
- 描述性的类名可以降低代码可读性，避免使用类名值描述样式的特定行为。
示例代码：
-- -------------------- ---- -------
------
------
----- ---------------- ---------------------------------------------------------
--------------- ---------------
-------
------
---- --------------- ---- ------------ ----------------
---- --------------------
--- --------------- --------- ------------ --------------
------- ------------------ ----------------- ---------- --------- ---- ---- ---------
----- --
---------
------
------
-------
-------上述例子仅使用 Tailwind，令页面舒适简洁，并且灵活使用到了一些按钮样式上。当然，这也只是一个非常简单的示例，您可以根据自己的需求深入了解这个优秀的 CSS 框架。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646e2333968c7c53b0cb4b5a