使用POSTCSS编译安装tailwindcss

1.先使用NPM安装postcss-cli和tailwindcss包。

npm install -D postcss-cli tailwindcss

2.创建postcss.config.js配置文件，写入tailwindcss配置项。

// postcss.config.js
 module.exports = {
   plugins: {
     tailwindcss: {}
   }
 }

3.使用npx命令创建tailwindcss配置文件(即tailwind.config.js),并配置好提取文件路径。

npx tailwindcss init

tailwind.config.js文件中写入(这里以提取根目录下的所有html文件作为示例):

module.exports = {
  purge: [
    "*.html"  //要提取css样式的html文件路径
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

4.创建CSS源文件。

这里将css源文件保存在assets/css/tailwind.css作为示例。

/* assets/css/tailwind.css */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

5.配置npm脚本命令。

在package.json文件中写入scripts配置项，这里将编译后的css文件保存到/css/tailwind.css文件作为示例。

{
  "devDependencies": {
    "postcss-cli": "^8.3.1",
    "tailwindcss": "^2.2.7"
  },
  "scripts": {
    "development": "NODE_ENV=development npx postcss assets/css/tailwind.css -o css/tailwind.css",
    "dev": "npm run development",
    "production": "NODE_ENV=production npx postcss assets/css/tailwind.css -o css/tailwind.css",
    "prod": "npm run production"
  }
}

配置好后，在开发环境就可以使用npm run dev生成css文件，在生产环境使用npm run prod生成精简后的css文件。