Tailwind 是一个非常流行的前端框架，它提供了强大的工具来快速构建精美的用户界面。不过，有时候你可能希望在 Tailwind 的基础上添加一些自己的特色。这时，使用 Less 或 Scss 来扩展 Tailwind 可能是一个不错的选择。本文将介绍如何在 Tailwind 中使用 Less 和 Scss，并提供一些示例代码。
Less
安装 Less
在使用 Less 之前，你需要先安装 Less：
npm install less --save-dev
扩展 Tailwind
扩展 Tailwind 最简单的方法是使用 @import 命令在 Less 文件中导入 Tailwind 样式。首先，你需要创建一个名为 tailwind-custom.less 的文件，并编写以下代码：
@import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities"; /* 这里写你的自定义样式 */
这将导入 Tailwind 的所有基础样式，以及一个空的块，用于写你的自定义样式。接下来，你可以在自定义块中添加你自己的样式：
.my-custom-class {
background-color: skyblue;
color: white;
}构建 Less 文件
最后一步是使用 Less 编译器将 Less 文件编译成 CSS 文件。你可以使用命令行工具来编译文件：
lessc tailwind-custom.less tailwind-custom.css
这将编译 tailwind-custom.less 文件并将其输出到 tailwind-custom.css 文件。
在 HTML 中使用样式
现在你可以将 tailwind-custom.css 文件添加到你的 HTML 文件中：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------- --------------
----- ---------------- ------------------------
----- ---------------- ---------------------------
-------
------
---- ------------------------
---- -- -- ------ ------
------
-------
-------Scss
安装 Sass
在使用 Scss 之前，你需要先安装 Sass：
npm install sass --save-dev
扩展 Tailwind
扩展 Tailwind 的方法与使用 Less 类似。首先，你需要创建一个名为 tailwind-custom.scss 的文件，并编写以下代码：
@import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities"; /* 这里写你的自定义样式 */
这将导入 Tailwind 的所有基础样式，以及一个空的块，用于写你的自定义样式。接下来，你可以在自定义块中添加你自己的样式：
.my-custom-class {
background-color: skyblue;
color: white;
}构建 Scss 文件
最后，你需要使用 Sass 编译器将 Scss 文件编译成 CSS 文件。你可以使用以下命令编译文件：
sass tailwind-custom.scss tailwind-custom.css
这将编译 tailwind-custom.scss 文件并将其输出到 tailwind-custom.css 文件。
在 HTML 中使用样式
最后一步是将 tailwind-custom.css 文件添加到你的 HTML 文件中：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------- --------------
----- ---------------- ------------------------
----- ---------------- ---------------------------
-------
------
---- ------------------------
---- -- -- ------ ------
------
-------
-------总结
使用 Less 和 Scss 扩展 Tailwind 可能会更容易，因为你可以使用这些预处理器的语法来编写样式。本文介绍了如何在 Tailwind 中使用 Less 和 Scss，并提供了一些示例代码。希望这篇文章对你有所帮助，可以帮助你扩展 Tailwind 并创建出更漂亮的 UI。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646af9f0968c7c53b0a6e491