在我们的教程中为 wagtail 项目选择 CSS 框架 TailwindCSS 而不是 Bootstrap，是因为 TailwindCSS 更轻量级，更易定制，尽管我们可能不用定制。

要在系统中使用 TailwindCSS 就需要配置好 TailwindCSS。

为项目配置 TailwindCSS

TailwindCSS 是一个 CSS 项目，但是它是一个 JavaScript 软件包。它的工作原理是：使用 JavaScript 实时的把用户在 html 文件中使用的样式打包到 css 文件。TailwindCSS 这种设计原理使它的样式文件非常小。

安装 TailwindCSS

使用如下命令安装 tailwindcss 的 JavaScript 软件包：

npm install tailwindcss

创建入口文件

在项目内创建一个 mysite/static/src/tailwind.css 文件，添加如下内容：

@import "tailwindcss";

安装命令行工具

用于生成 TailwindCSS 样式文件的命令行工具有好几个，在 wagtail 项目中推荐使用 Tailwind CLI，在本教程中也是使用 Tailwind CLI。

npm install @tailwindcss/cli

创建脚本命令

在项目根目录的 package.json 文件的 scripts 属性内容添加脚本命令：

"dev": "npx @tailwindcss/cli -i ./mysite/static/src/tailwind.css -o ./mysite/static/css/tailwind.css --watch",
"prod": "npx @tailwindcss/cli -i ./mysite/static/src/tailwind.css -o ./mysite/static/css/tailwind.css --minify"

实时生成样式文件

在项目根目录运行脚本命令：

npm run dev

当在模板文件中使用 tailwindcss 样式时，会自动把样式添加到 ./mysite/static/css/tailwind.css 文件中。

配置 VS Code 的 TailwindCSS 插件

1、安装 Tailwind CSS IntelliSense 插件

搜索 Tailwind CSS IntelliSense 扩展，选中名称为“Tailwind CSS IntelliSense”的插件并安装。

2、为字符串形式的内容启用智能提示，在 .vscode/settings.json 添加如下代码：

"editor.quickSuggestions": {
    "strings": "on"
}