Tailwind CSS 是一个高度可定制的低级 CSS 框架，它提供了一系列独立的 CSS 类，可以帮助快速构建 UI 界面，而无需手动编写 CSS 样式。Eleventy 是一个用于构建静态网站和博客的简单工具，同时也是一个灵活的静态网站生成器。在本文中，我们将介绍如何在 Eleventy 项目中使用 Tailwind CSS。
步骤 1：安装 Tailwind CSS
使用 npm 安装 Tailwind CSS:
npm install tailwindcss
安装完成后，在项目根目录新建 tailwind.config.js 文件，并运行以下命令生成默认配置：
npx tailwindcss init
生成的默认配置 tailwind.config.js 文件如下所示：
-- -------------------- ---- -------
-------------- - -
------ ---
--------- ------ -- -- ------- -- -------
------ -
------- ---
--
--------- -
------- ---
--
-------- ---
-步骤 2：配置 Eleventy
在 .eleventy.js 文件中，将 CSS 文件导入到模板中：
-- -------------------- ---- -------
-------------- - ------------------------ -
-----------------------------------------
------ -
---- -
------ ------
------- -------
-
-
-在 src 目录下新建 css/main.css 文件，并将 Tailwind CSS 导入其中：
@tailwind base; @tailwind components; @tailwind utilities;
步骤 3：使用 Tailwind CSS
在模板文件中，使用 Tailwind CSS 类来构建 UI 界面：
-- -------------------- ---- -------
--------- -----
------
------
--------------- --- -------- -----------
----- ---------------- ---------------------
-------
------
--- --------------- --------- ----------- ----------- ----------
---- ----------- -------------- ------
-- -------------------- -------------------- -----------------
------
---- -------------
-- --------------------
----- ----- ----- --- ----- ----------- ---------- -----
--- -- ------- ------ ---------- -- ------ -- ------ ----- -------
----
--- ---------------- ------
--------- ----- ----- --- ---------
--------------- ---------- ---------
------- -- ------- ------ ---------------
------ ------ -- ------ ----- -----------
-----
------
-------
-------步骤 4：构建 Eleventy 项目
使用以下命令构建 Eleventy 项目：
npx eleventy
构建完成后，可在 _dist 目录下找到生成的静态网站文件。打开 index.html 文件，即可看到使用了 Tailwind CSS 的 UI 界面。
总结
通过上述步骤，我们在 Eleventy 项目中成功使用了 Tailwind CSS。通过 Tailwind CSS 提供的独立的 CSS 类，我们可以快速构建灵活美观的 UI 界面。通过 Eleventy 的简单易用的功能，我们可以快速构建静态网站和博客。希望本文对您的学习和实践有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6491123d48841e9894f16042