1. 安装与配置 tailwindcss

推荐使用 nodejs 版本 ^20.19.0 || >=22.12.0。目前低于 18 的长期维护版本(偶数版本) 都已经结束了生命周期，建议安装 nodejs 的 LTS 版本，详见 nodejs/release。

假如你安装的 nodejs 太新，可能会出现安装包不兼容的问题，这时候可以执行安装命令时，使用 --ignore-engines 参数进行 nodejs 版本的忽略 。

首先安装本插件前，我们需要把 tailwindcss 对应的环境和配置安装好。

这里我们参考 tailwindcss 官网中 postcss 的使用方式进行安装 (参考链接)

1. 使用包管理器安装 tailwindcss

npm

# 安装 tailwindcss@3 版本的依赖
npm i -D tailwindcss@3 postcss autoprefixer

Yarn

# 安装 tailwindcss@3 版本的依赖
yarn add --dev tailwindcss@3 postcss autoprefixer

pnpm

# 安装 tailwindcss@3 版本的依赖
pnpm add -D tailwindcss@3 postcss autoprefixer

Bun

# 安装 tailwindcss@3 版本的依赖
bun add --dev tailwindcss@3 postcss autoprefixer

npm

# 初始化 tailwind.config.js 文件
npx tailwindcss init

Yarn

# 初始化 tailwind.config.js 文件
yarn dlx tailwindcss init

pnpm

# 初始化 tailwind.config.js 文件
pnpm dlx tailwindcss init

Bun

# 初始化 tailwind.config.js 文件
bun x tailwindcss init

信息

tailwindcss 最新版本(3.x)对应的 postcss 大版本为 8，假如你使用像 uni-app 或 taro 这样的跨端框架，大概率已经内置了 postcss 和 autoprefixer

2. 在项目目录下创建 postcss.config.js 并注册 tailwindcss

注意：这只是比较普遍的注册方式，各个框架很有可能是不同的! 比如 uni-app vue3 vite 项目就必须要内联注册 postcss 选项! 详见下方的注意事项

postcss.config.js

// 假如你使用的框架/工具不支持 postcss.config.js 配置文件，则可以使用内联的写法
module.exports = {
  plugins: {
    tailwindcss: {},
    // 假如框架已经内置了 `autoprefixer`，可以去除下一行
    autoprefixer: {},
  }
}

注意事项

uni-app vite vue3 项目，必须在vite.config.ts 文件中，使用 postcss 内联的写法注册插件。相关写法可以参考我的这个模板项目: uni-app-vite-vue3-tailwind-vscode-template。

uni-app vue2 / webpack 属于存量项目路线，不再推荐新项目继续使用。

3. 配置 tailwind.config.js

tailwind.config.js 是 tailwindcss 的配置文件，我们可以在里面配置 tailwindcss 的各种行为。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 这里给出了一份 uni-app /taro 通用示例，具体要根据你自己项目的目录结构进行配置
  // 不在 content 包括的文件内，你编写的 class，是不会生成对应的css工具类的
  content: [
    './public/index.html',
    './src/**/*.{html,js,ts,jsx,tsx,vue}',
    '!./src/uni_modules/**/*',
  ],
  // 其他配置项
  // ...
  corePlugins: {
    // 小程序不需要 preflight，因为这主要是给 h5 的，如果你要同时开发小程序和 h5 端，你应该使用环境变量来控制它
    preflight: false
  }
}

content 扫描范围排障

问题现象

在 uni-app + tailwindcss@3 场景下，如果项目把第三方插件或依赖放在 src/uni_modules 下，同时 tailwind.config.js 里使用了这类过宽配置：

content: ['./src/**/*.{html,js,ts,jsx,tsx,vue}']

Tailwind 可能会扫描到依赖源码中的正则片段、README 示例文本或构建产物，例如 [a-zA-Z:_]，并把它误识别成 arbitrary property class。到了小程序产物阶段，再经过 weapp-tailwindcss 转译后，可能出现类似：

._ba-zA-Z_c__B {
  a-z-a--z:;
}

这样的异常 CSS。

根因

根因不是业务代码真的写了这个 class，而是 tailwindcss@3 默认内容提取器误扫了第三方目录中的源码、文档或构建产物。

推荐配置

对于 uni-app + tailwindcss@3，请显式排除 src/uni_modules：

tailwind.config.ts

export default {
  content: [
    './index.html',
    './src/**/*.{html,js,ts,jsx,tsx,vue}',
    '!./src/uni_modules/**/*',
  ],
}

如果你使用的是 tailwind.config.js，同样保持这三段含义不变即可。

最佳实践

• content 应尽量只覆盖业务源码目录
• 默认应排除 uni_modules、node_modules、dist、unpackage、文档和生成产物
• 如果必须扫描某个 uni_modules 包，应只精确包含其中真正承载模板类名的文件，而不是整个目录全量扫描

4. 引入 tailwindcss

在你的项目入口引入 tailwindcss 使它在小程序全局生效

uni-app

比如 uni-app 的 App.vue 文件:

App.vue

<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
/* 使用 scss */
/* @import 'tailwindcss/base'; */
/* @import 'tailwindcss/utilities'; */
/* @import 'tailwindcss/components'; */
</style>

注意

千万不要在 uni.scss 中去引入 tailwindcss, uni.scss 本质上走的是 scss.additionalData, 它会在每一个 scss 文件的开头，都去添加 uni.scss 里的文件内容

所以这相当于你每个 scss/ vue 文件里面，都加了 tailwindcss 引入，那 css 体积就爆炸了

Taro

又或者 Taro 的 app.scss 文件:

app.scss

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

// sass 版本1.25+ 使用 @use
// @use 'tailwindcss/base';
// @use 'tailwindcss/components';
// @use 'tailwindcss/utilities';

// 非 scss 的纯 css 文件，下列写法也是可以生效的
// @tailwind base;
// @tailwind components;
// @tailwind utilities;

然后在 app.ts 里引入这个样式文件即可。

这样 tailwindcss 的安装与配置就完成了，接下来让我们进入第二个环节：安装 weapp-tailwindcss。

参考链接

tailwindcss 官方配置项