1. 使用包管理器安装 tailwindcss

pnpm i -D tailwindcss postcss autoprefixer  
# 初始化 tailwind.config.js 文件  
npx tailwindcss init

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

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

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

2. 配置 tailwind.config.js

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

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

3. 引入 tailwindcss

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

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

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

2. 安装weapp-tailwindcss插件

pnpm i -D weapp-tailwindcss

然后把下列脚本，添加进你的 package.json 的 scripts 字段里:

"scripts": {  
"postinstall": "weapp-tw patch"  
}

执行 weapp-tw patch 主要是做2件事情

1. 给当前你本地的 tailwindcss 打上支持 rpx 的补丁 (小程序特有单位，非 web 标准)
2. 用来暴露 tailwindcss 运行上下文给 webpack/vite/glup 插件。 而添加上面一段 npm scripts 的用途是，利用 npm hook, 每次安装包后，都会自动执行一遍 weapp-tw > > patch 这个脚本。 这样即使 tailwindcss 更新了版本导致了补丁失效，也会在重新下载后，第一时间被打上。

3.注册插件

import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import { UnifiedViteWeappTailwindcssPlugin as uvwt } from 'weapp-tailwindcss/vite';

export default defineConfig({
  // uni 是 uni-app 官方插件， uvtw 一定要放在 uni 后，对生成文件进行处理
  plugins: [uni(),uvwt()],
  css: {
    postcss: {
      plugins: [
        // require('tailwindcss')() 和 require('tailwindcss') 等价的，表示什么参数都不传，如果你想传入参数
        // require('tailwindcss')({} <- 这个是postcss插件参数)
        require('tailwindcss'),
        require('autoprefixer')
      ],
    },
  },
});

4.开始享受

<script setup>


</script>
<template>

<div class="text-xl">我是测试 </div>


</template>
<style lang='scss' scoped>
</style>