Tailwind CSS 安装步骤

通过 npm imit 初始依赖，然后使用 npm install -D tailwindcss@latest postcss@latest autoprefixer@latest 安装 Tailwind，使用 npm i postcss postcss-cli -g 安装 postcss 命令

通过 npx tailwindcss init -p 初始化两个文件，分别是 tailwind.config.js 和 postcss.config.js

PS C:\Users\ASUS\PycharmProjects\lab8\app> npx tailwindcss init -p

Created Tailwind CSS config file: tailwind.config.js

Created PostCSS config file: postcss.config.js

项目内新建一个目录，名为 CSS ，里面新增一个文件 style.css，在里面使用 @tailwind 关键词，载入 Tailwind 三大部件。

@tailwind base;

@tailwind components;

@tailwind utilities;

在 package.json 内新增一个 scripts

"scripts" : {

        "watch": "postcss static/css/style.css -o static/plugins/style.css --watch"

    }

新建文件夹 templates（Django 规定目录，使用其他框架可以重新命名）， 新增一个 index.html ，载入 plugins/style.css

打开 tailwind.config.js，在 purge 数组里添加 templates 目录下所有 HTML 文件

purge: [

      './templates/**/*.html'

  ],

在 package.json 内新增一个 script 名为 build

"scripts": {

    "watch": "postcss static/css/style.css -o static/plugins/style.css --watch",

    "build": "cross-env NODE_ENV=production postcss static/css/style.css -o static/plugins/style.css"

  },

运行 build，完成！