Eleventy 是一个简单、灵活的静态网站生成器，具有强大的模板语言和丰富的插件库。而 Tailwind CSS 则是一款快速开发 Web 界面的实用工具集，具有丰富的样式定义和易于扩展的特性。本文将介绍在 Eleventy 项目中使用 Tailwind CSS 的最佳实践。
安装 Tailwind CSS
首先，需要安装 Tailwind CSS 和其相关的插件：
npm install tailwindcss postcss postcss-cli autoprefixer --save-dev
安装好后，需要创建 Tailwind CSS 的配置文件 tailwind.config.js：
module.exports = {
purge: [], // 根据需要配置 PurgeCSS
darkMode: false, // 禁用暗色模式
theme: {}, // 定义自定义主题
variants: {}, // 定义自定义变体
plugins: [], // 注册插件
}然后，需要创建 postcss.config.js 配置文件：
module.exports = {
plugins: [require("tailwindcss"), require("autoprefixer")],
}添加样式文件
在项目中添加一个样式文件，例如 styles/index.css，并将其引入到模板中。在样式文件中，使用 @import 引入 Tailwind CSS：
/* styles/index.css */ @import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities";
构建样式表
在 Eleventy 项目中，可以使用 Eleventy Plugin for PostCSS 来构建样式表。首先，在项目中安装该插件：
npm install @11ty/eleventy-plugin-postcss --save-dev
然后，在 .eleventy.js 中配置该插件：
-- -------------------- ---- -------
----- ------------- - -----------------------------------------
-------------- - -------- ---------------- -
----------------------------------------
------ ---------------
------ -----------------------
------- ------------------------
-------- -
-----------------------
--------------------------
--
--------- -----
----
--其中，watch 表示需要监听的文件路径，input 和 output 分别表示输入和输出文件路径。在 plugins 中注册需要使用的插件。
在 HTML 中使用样式表
最后，在需要使用样式表的页面中引入样式表：
-- -------------------- ---- -------
--------- -----
------
------
---- --- ---
----- ---------------- ----------------------- --
-------
------
---- --- ---
-------
-------定制化
Tailwind CSS 中的样式类非常丰富，可以大幅提高页面开发的效率。如果需要使用自定义的样式类，可以在 Tailwind CSS 的配置文件中定义主题和变体：
-- -------------------- ---- -------
-------------- - -
------ -
------- -
------- -
-------- ----------
---------- ----------
--
--
----------- -
----- ------ ------ ---------- ------ -------- --------------
------ ----------- ---------
----- ------------ -------- ----- -------------
--
--------- -
--- ---------
--- ----------
----- -------
--- -----------
--- ----------
------ ---------
------ -----------
------ ----------
------ -------
------ -------
--
--
--------- ---
-------- ---
-总结
本文介绍了在 Eleventy 项目中使用 Tailwind CSS 的最佳实践。通过安装、配置、使用、构建 Tailwind CSS，可以大幅提高页面开发的效率。同时，通过定制化配置，可以使用自定义的样式类。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6533498d7d4982a6eb6cc5b9