如何在 Express 项目中使用 TailwindCSS？-JavaScript中文网-JavaScript教程资源分享门户

TailwindCSS 是一个流行的 CSS 框架，它提供了一系列实用的类，能够让你快速地构建出漂亮的界面。在本文中，我们将会介绍如何在 Express 项目中使用 TailwindCSS。

安装

首先，我们需要通过 npm 来安装 TailwindCSS：

npm install tailwindcss

配置

接下来，在项目的根目录下创建一个 tailwind.config.js 文件，用来配置 TailwindCSS：

-- -------------------- ---- -------
-------------- - -
  ------ ---
  --------- ------ -- -- ------- -- -------
  ------ -
    ------- ---
  --
  --------- -
    ------- ---
  --
  -------- ---
-

其中，purge 字段用来配置需要移除未使用类的文件，这里我们可以将其设置为空数组 []。theme 用来扩展 TailwindCSS 的默认设置，variants 用来定义能够被修改的 CSS 属性，plugins 用来配置插件。

接着，我们需要在项目的主要 CSS 文件中引入 TailwindCSS：

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

使用

在配置和安装完毕后，我们就可以在项目中使用 TailwindCSS 了。例如，我们可以在 HTML 文件中使用其中的类来定义元素：

<div class="bg-blue-400 p-4 rounded-lg">
  <h1 class="text-2xl font-bold text-white">Hello, TailwindCSS!</h1>
  <p class="mt-2 text-white">TailwindCSS is awesome!</p>
</div>

这里，bg-blue-400 表示背景色为 blue-400，p-4 表示 padding 大小为 4，rounded-lg 表示圆角大小为 large，text-2xl 表示文本大小为 2xl，font-bold 表示文本粗体，text-white 表示文本颜色为白色，mt-2 表示上边距为 2。

打包

最后，在构建前端项目的时候，我们需要对 TailwindCSS 进行打包。可以通过在 postcss.config.js 中配置 tailwindcss 来实现：

const tailwindcss = require("tailwindcss");
module.exports = {
  plugins: [
    tailwindcss("./tailwind.config.js")，
    require("autoprefixer")
  ]
};

结论

在本文中，我们介绍了如何在 Express 项目中使用 TailwindCSS。通过安装、配置和打包的过程，让您可以轻松地将这个流行的 CSS 框架应用于您的 Express 项目中。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67386c7c317fbffedf10610f