近年来，前端开发中使用 UI 框架的趋势越来越明显，尤其是在 Vue、React 等框架中的应用。而 Tailwind CSS 作为一款全新的 CSS 框架，其出现颠覆了我们对于 UI 框架的认识。尤其是在风格规范、样式复用以及组件开发方面，Tailwind 发挥了巨大的作用。
Tailwind 简介
Tailwind CSS 是一个实用的 CSS 框架，其使用可高度自定义的低级工具类实现基础 UI 组件开发，从而实现样式复用。而根据官方描述，Tailwind 的目标是只提供必要的工具，同时尽可能提供更多自定义工具的方法，以满足各种需求。
设计原则
Tailwind 的设计原则是保持简单和可定制性。设计起源于 Brad Frost 的 Atomic Design 概念，不强制使用任何框架。框架库只包含低级实用工具，旨在最大化提供自定义 CSS 系统的能力。
使用场景
Tailwind 展现出极佳的灵活性，对于组件封装来说也是非常有帮助的。使用 Tailwind 可以轻松地完成UI的开发，同时还允许灵活地自定义样式。
使用场景主要依赖于样式复用，比如开发者可以将样式应用到不同的组件中，避免了样式的重复写作。同时也为打包体积提供了很好的优化方案。
使用实践
本篇文章着重介绍如何将 Tailwind 样式集成到系统中。
Tailwind 被形容为 Collection of CSS styles。实际上，会出现在 Tailwind 样式文件中的类与对应的 CSS 样式有些并不相同。因为 Tailwind 遵循一种 class 命名规范。具体来说，有两种方式可以让 Tailwind 样式在系统中应用，并且实现样式的定制。
1. 在 HTML 中使用
在 HTML 元素上添加对应规范的 class，即可在应用程序中看到对应的样式。比如可以像下面这样实现一个按钮组件：
------- ----------- ---- ---------- ------------- -----------------------
上面代码中， Tailwind 的一些 class 可以直接自己进行转换，比如 padding、 margin、 font-size、 font-weight 等等。
2. 在 JavaScript 中使用
在 JavaScript 中，调用 Tailwind 中提供的函数来生成特定的样式。这种情况下，样式只需要在需要的时候执行即可。
下面是一个简单的 Webpack 配置示例，使用 tailwindcss 和 postcss-loader 的组合，将 Tailwind CSS 集成到应用中去。
-- -----------------
-------------- - -
------- -
------ -
-
----- -----------
---- -
-- - --- --- -- ---
---------------
-------------
----------------
-
-
-
--
-- ---------
-------- -
-------- ------------------------
--
-- ---- -------- -------
-- ----- ---------- --- -- ---- ---------- -----
------ -
-------- -------------------- --- -------------
-------- ------------------- -----------------
-
--这个示例会将 Tailwind 的 CSS 集成到一个运行中的项目中。在编写组件时，只需要在 JavaScript 中导入相应的样式即可，比如：
------ - -- - ---- --------------------------
------ ------- -
--------- -
------- -------------------
-- ---- --
---------
--
------ -
----- -
----- -------
-------- --
-
--
--------- -
----------- -
------ ---------------- ---------- ---- ---- ------------ -- ------ -- --
-
-
--上面的示例中，我们使用了 Tailwind 中提供的tw()函数来生成样式。
总结
Tailwind CSS 作为一款全新的 CSS 框架，在前端开发中发挥着愈发显著的作用。通过本文的阐述，可以更深入地了解 Tailwind 的设计原则和使用场景，并实践将 Tailwind 集成到项目中的具体步骤。尤其是在组件开发和样式复用方面，Tailwind 都具备着绝佳的优势。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/645435b2968c7c53b08384ad