此贴的安装说明仅适用于tailwindcss 2的版本，但时隔一年， tailwindcss 3 已经发布，此贴中的安装方式已经不再适用。
这几天陆续有一些朋友咨询怎么让Tailwind CSS开始工作。不知道怎么使用Tailwind，这篇教程给大家做一个详细的说明。
直接开始。
安装PostCSS
新建一个项目目录，然后在根目录运行
npm i --save-dev postcss-cli
安装Tailwind CSS以及相关依赖
npm install tailwindcss@latest postcss@latest autoprefixer@latest
添加Tailwind作为PostCSS插件
在根目录新建一个postcss配置文件postcss.config.js,并且将文件内容修改为以下：
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
创建您的配置文件
运行以下命令
npm init -y
这会在根目录下生成一个package.json文件。
继续运行
npx tailwindcss init
这会在你的项目根目录创建一个tailwind.config.js文件，将内容修改为以下：
// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {},
plugins: [],
}
创建你的css文件
创建一个css文件，位置随意，比如src/style.css,并且将内容修改为如下：
/* ./你的css文件夹/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
创建构建命令
现在打开 package.json 文件，添加以下运行脚本：
"scripts": {
"build": "postcss src/style.css -o dist/tailwind.css"
}
创建Tailwind CSS
这个构建的css文件就是你最终使用的css文件。
现在，从命令行运行 npm run build 将构建最终的CSS文件。
生成的文件位于 dist/tailwind.css （您可以在上面的命令中更改位置）。
然后在你的html文件中引用这个css文件就可以。
更改文件后自动重新生成CSS
如果你想要每次修改文件后，自动重新生成一下css文件，比如你在style.css里自定义了一个组件，并且希望实时生效，那么就需要用到监听。
现在打开 package.json 文件，添加以下运行脚本：
"scripts": {
"watch": "postcss build src/css/tailwind.css -o dist/css/tailwind.css --watch",
}
现在 package.json 文件的脚本部分变成了这样：
"scripts": {
"build": "tailwindcss build src/css/tailwind.css -o dist/css/tailwind.css",
"watch": "postcss build src/css/tailwind.css -o dist/css/tailwind.css --watch",
},
这时候只要运行npm run watch就可以自动监听你的页面改动。
优化Tailwind CSS文件大小
上面编译出来的Tailwind是完整的css文件，总共18万行css代码，文件将近4M。但是我们实际的项目，其实根本用不着所有Tailwind CSS自带的样式，所以这时候，我们就需要优化一下，我们希望最终打包的时候，css只编译我们用到的部分，用不到的自动删除掉。
这时候需要配置一下tailwind.config.js:
// tailwind.config.js
module.exports = {
purge: [
'./src/*.html',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {},
plugins: [],
}
可以看到我们在 "purge "选项内增加了一个文件路径。意思就是打包的时候，检查这个路径下的这些文件，然后自动删除这些文件没用到的css。路径这里可以使用通配符，更详细的教程可以看 http://tailwind.wyz.xyz/docs/optimizing-for-production
现在打开 package.json 文件，添加以下运行脚本：
"scripts": {
"build:css": "cross-env NODE_ENV=production postcss src/css/tailwind.css -o dist/css/tailwind.css"
}
现在 package.json 文件的脚本部分变成了这样：
"scripts": {
"build": "tailwindcss build src/css/tailwind.css -o dist/css/tailwind.css",
"watch": "postcss build src/css/tailwind.css -o dist/css/tailwind.css --watch",
"build:css": "cross-env NODE_ENV=production postcss src/css/tailwind.css -o dist/css/tailwind.css"
},
因为这条命令需要用到cross-env,所以安装一下：
npm i cross-env --save-dev
在整个项目完成之后，运行npm run build:css,会自动构建一个最小的css文件。切记这条命令在所有项目完成后运行，如果在你项目开发阶段运行。会造成，你之后新增加的css类，在之前构建的css中不存在，因为被你优化掉了。所以在项目开发阶段，只需要运行npm run watch就可以。
自动刷新HTML文件
这是个题外话，不属于Tailwind CSS的范畴，如果你在写静态页面的时候，需要每次修改html页面，浏览器就自动刷新这个页面，那么只需要在vscode内搜索Live Server并且安装，之后在你需要预览的页面，右键，选择Open with Live Server即可。
提供