Tailwind CSS 是一个流行的 CSS 框架，为开发人员提供了一个丰富、灵活的工具箱来构建用户界面。它具有高度的可定制性和易于使用的优点，让许多开发者爱不释手。在本篇文章中，我们将介绍如何在 Express.js 项目中使用 Tailwind CSS。
第一步：安装 Tailwind CSS
在开始使用 Tailwind CSS 前，必须先安装它。我们可以使用 Node 包管理器 (npm) 来安装 Tailwind CSS。
npm install -D tailwindcss
第二步：使用 PostCSS
Tailwind CSS 是基于 PostCSS 的插件，因此，我们需要在项目中安装 PostCSS 及其相关插件。
npm install -D postcss postcss-cli postcss-import postcss-nested postcss-preset-env
第三步：引入 Tailwind CSS
在我们的项目中使用 Tailwind CSS 需要先引入它。在项目的 root 根目录下，创建 postcss.config.js 文件：
-- -------------------- ---- -------
-------------- - -
-------- -
--------------------------
--------------------------
-----------------------
-------------------------------
------ --
--------- ------ - ----------
--
-
-第四步：配置 Tailwind CSS
Tailwind CSS 提供了一个非常详细的配置文件，用于控制各种样式的定制。在我们的项目根目录，创建一个叫做 tailwind.config.js 的文件。
module.exports = {
theme: {},
variants: {},
plugins: []
}其中，theme 用于定义项目的颜色、字体、间距等样式，variants 定义样式（例如 hover、active、focus），plugins 可以添加其他 CSS 插件。
第五步：在 Express.js 中使用 Tailwind CSS
让我们完成最后一步：在 Express.js 项目中使用 Tailwind CSS。为此，我们需要将本地 CSS 文件合并到我们的 HTML 文件中。先在项目的 public 文件夹中创建一个 CSS 文件夹。
mkdir public/css
然后，将我们的 Tailwind CSS 文件链接到 HTML 中。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------- ---- -------- -----------
----- ---------------- ------------------------
-------
------
--- -------------------- ----------- -------- --------- ------
------ ------- ---- -------- ----
-----
-------
-------最终而言，我们需要告诉 Express.js 服务器，我们已经将文件存储在了 public 中，并可以在 HTML 中使用。我们可以这样做。
const express = require('express')
const path = require('path')
const app = express()
app.use(express.static(path.join(__dirname, 'public')))现在开启你的 Express.js 项目，并查看 HTML 页面的源代码，你将发现我们引入了 Tailwind CSS，它能够驱动我们在 HTML 元素中使用的样式。
总结
在这篇文章中，我们学习了如何在 Express.js 项目中使用 Tailwind CSS。通过安装 Tailwind CSS，使用 PostCSS 插件，并配置 Tailwind，最后，在 Express.js 服务器中链接我们的 CSS 文件。希望这篇文章对你的前端工作有所指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645dfce5968c7c53b005705d