前情
Tailwind CSS 是一个原子类 CSS 框架，它将基础的 CSS 全部拆分为原子级别，同时还补全各种浏览器模式前缀，兼容性也不错。它的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何模板中的 CSS 类名，然后生成相应的样式代码并写入到一个静态 CSS 文件中。Tailwind CSS 快速、灵活、可靠，没有运行时负担。自动接触了Tailwindcss后，目前已经是我项目的标配了。正好手上有一个Taro的小程序项目，我也想让它引入Tailwindcss。
世面上流行的几种接入方式
方式1：通过https://github.com/pcdotfan/taro-plugin-tailwind插件引入
缺点：需要特殊处理冒号和反斜杠，同时对于tailwindcss的一些高级特性不支持，开发体验大打折扣
方式2：通过https://github.com/dcasia/mini-program-tailwind插件引入
缺点：它实际上使用的是windi.css，目前windi.css已经处于不维护状态，官方已不推荐使用
方式3：通过使用https://github.com/sonofmagic/weapp-tailwindcss插件引入
基本与普通web项目使用差异不是特别大，目前我的taro项目就是使用此方式引入的。
通过https://github.com/sonofmagic/weapp-tailwindcss插件引入步骤
STEP 1：安装相关依赖
npm install -D tailwindcss postcss autoprefixer weapp-tailwindcss
STEP 2：补充配置
# 初始化 tailwind.config.js 文件
npx tailwindcss init
执行上面命令生成tailwind.config.js，并增加如下配置
/** @type {import('tailwindcss').Config} */
module.exports = {
// 不在 content 包括的文件内编写的 class，不会生成对应的工具类
content: ['./public/index.html', './src/**/*.{html,js,ts,jsx,tsx,vue}'],
// 其他配置项
// ...
corePlugins: {
// 不需要 preflight，因为这主要是给 h5 的，如果你要同时开发小程序和 h5 端，你应该使用环境变量来控制它
preflight: false
}
}
手动创建postcss.config.js，并注册Tailwindcss
// postcss.config.js
// 假如你使用的框架/工具不支持 postcss.config.js，则可以使用内联的写法
// 其中 `autoprefixer` 有可能已经内置了，假如框架内置了可以去除
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
在项目的配置文件 config/index中注册weapp-tailwindcss:
// config/index.js
const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss/webpack')
{
mini: {
webpackChain(chain, webpack) {
chain.merge({
plugin: {
install: {
plugin: UnifiedWebpackPluginV5,
args: [{
appType: 'taro'
}]
}
}
})
}
}
}
另外在和 @tarojs/plugin-html 一起使用时，需要配置下 postcss-html-transform 这个插件，不然默认配置下它会移除整个 Tailwindcss 注入的 css var 区域块，这会造成所有 tw-* 相关变量找不到，导致样式大量挂掉的问题。
// config/index.js
config = {
// ...
mini: {
// ...
postcss: {
htmltransform: {
enable: true,
// 设置成 false 表示 不去除 * 相关的选择器区块
// 假如开启这个配置，它会把 tailwindcss 整个 css var 的区域块直接去除掉
// 需要用 config 套一层，官方文档上是错的
config: {
removeCursorStyle: false,
}
},
},
},
}
STEP 3：在项目入口引入Tailwindcss
// 在Taro项目下的app.scss中增加如下css代码
@import 'tailwindcss/base';
@import 'tailwindcss/utilities';
@import 'tailwindcss/components'
这样就可以愉快的在 taro项目中使用Tailwindcss开发需求了。
友情提示
在vs code下为了更好的用户开发体验，可以安装 Tailwindcss相关的插件
Tailwind CSS IntelliSense：此插件提示书写提示,极大的提高开发体验
Tailwind Documentation：文挡查询，在vscode中快速查询，直接搜索对应样式名就能查到使用方式，这个可有可无，直接查官方文挡也是一样的
