Tailwind.css + Postcss 笔记

0. 缘由

去年，一篇《Tailwind CSS: From Side-Project Byproduct to Multi-Million Dollar Business》在我的时间线上刷屏，作为 side project 和自由职业的翘楚，他的产品和商业项目十分令人羡慕。

所以，我一直想找个机会试用一下 Tailwind.css。这次春节，想着放松休闲一下，就开了个小项目，尝试一下新技术栈：

1. Vue3 全家桶
2. Tailwind.css + PostCSS
3. 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 实现界面了。