0. 缘由
去年，一篇《Tailwind CSS: From Side-Project Byproduct to Multi-Million Dollar Business》在我的时间线上刷屏，作为 side project 和自由职业的翘楚，他的产品和商业项目十分令人羡慕。
所以，我一直想找个机会试用一下 Tailwind.css。这次春节，想着放松休闲一下，就开了个小项目，尝试一下新技术栈：
- Vue3 全家桶
- Tailwind.css + PostCSS
- Webpack 工具链
这篇笔记用来记录心得和体会。
1. 基础
官方网站：https://tailwindcss.com/
2. 安装&配置
npm install tailwindcss@latest postcss@latest autoprefixer@latest
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
2.1 创建 tailwindcss 配置
npx tailwindcss init
生成的配置文件如下：
// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {},
plugins: [],
}
2.2 创建 CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
这个 CSS 无法直接被浏览器使用，需要经过 PostCSS 调用 Tailwind 插件编译后才行。
2.3 配置 Webpack
只需要配置 CSS 和 Stylus 规则：
module.exports = {
module: {
rules: [
{
test: /.css$/,
use: [
isDevServer ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
},
{
test: /.styl(us)?$/,
use: [
isDevServer ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'stylus-loader',
],
},
]
}
}
2.4 配置 .browserslistrc
PostCSS 同样需要用 browserslist 处理兼容性问题，所以一定要配置好，比如我近期喜欢用 bootstrap-icons 为图标，需要用到 svg-mask 系列属性，在 Chrome 里就需要补充前缀。那么，如果 browserslist 里没有 Chrome 就不会加前缀（我昨天就踩在这个坑里）。可以使用 npx browserslist 来检查。
2.5 修改 npm scripts
PostCSS 和 Tailwind.css 需要用 NODE_ENV 变量决定动作内容，所以必须加到 npm scripts 里。
{
"scripts": {
"serve": "NODE_ENV=development webpack serve --config build/webpack.config.js",
"build": "NODE_ENV=production webpack --config build/webpack.config.prod.js --mode=production",
"lint": "eslint --fix --ext=.vue,.js ./"
}
}
2.6 完成
至此，基础 Tailwind.css + PostCSS + Webpack 配置完成，接下来就可以使用 CSS 实现界面了。
