通过cdn引入的方式使用tailwindcss虽然方便，但是这种方式引入的css文件存在很多冗余的在项目中并没有使用到的css样式，其文件大小达到了3.8M，因此本篇介绍通过tailwindecss-cli编译安装tailwindcss。这种方式生成的css文件可以去掉项目中未使用的css样式，精简过后的css文件大小只有几百甚至几十KB。
1.首先创建一个nodejs项目，并进行初始化。
npm init -y2.npm安装tailwindcss库。
npm install tailwindcss3.创建input.css文件，在文件中写入:
@tailwind base;
@tailwind components;
@tailwind utilities;4.创建tailwindcss配置文件tailwind.config.js。
npx tailwindcss init修改内容：
module.exports = {
content: ["./src/*/.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}content配置了从哪些文件提取使用过的css样式，当我们编译成生产环境的css时，会去掉那些没有使用的css样式，使得编译出来的css文件最小。
5. 创建一个html文件并引入tailwindcss中的样式，这里我就在./src/目录下创建index.html进行测试。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 class="text-red-500"></h1>
</body>
</html>这里只引入了一个”text-red-500″的样式。
6.使用tailwindcss-cli编译CSS。
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch