快速集成

如何使用

0. 创建项目

使用最新版本 Hbuilderx 创建一个 uni-app x 项目，然后执行

npm

npm init -y

Yarn

yarn init -y

pnpm

pnpm init -y

Bun

bun init -y

初始化一个 package.json 文件 (当然你也可以手动创建)

1. 安装并引入 tailwindcss3

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

然后，在你的根目录中的 App.uvue 中引入 tailwindcss 使它在应用全局生效

App.uvue

<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>

2. 安装 weapp-tailwindcss

在项目目录下，执行:

npm

npm i -D weapp-tailwindcss

Yarn

yarn add --dev weapp-tailwindcss

pnpm

pnpm add -D weapp-tailwindcss

Bun

bun add --dev weapp-tailwindcss

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

package.json

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

想知道原因的同学可以查看 这个链接

3. uni-app-x 注册 weapp-tailwindcss

0. 创建工具类

在项目中创建 shared.js 文件，用于存放一些工具函数：

shared.js

const path = require('node:path')

function r(...args) {
  return path.resolve(__dirname, ...args)
}

module.exports = {
  r,
}

1. 注册插件

创建 vite.config.ts 文件，注册插件：

这里特别注意 uniAppX 是从 weapp-tailwindcss/presets 这个预设中导出的

vite.config.ts

import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import { UnifiedViteWeappTailwindcssPlugin } from 'weapp-tailwindcss/vite'
import { r } from './shared'
import { uniAppX } from 'weapp-tailwindcss/presets'
import tailwindcss from 'tailwindcss'

export default defineConfig({
    plugins: [
        uni(),
        UnifiedViteWeappTailwindcssPlugin(
            uniAppX({
                base: __dirname,
                rem2rpx: true,
            }),
        ),
    ],
    css: {
        postcss: {
            plugins: [
                tailwindcss({
                    config: r('./tailwind.config.js'),
                }),
            ]
        }
    }
});

2. 更改 tailwindcss 配置

使用绝对路径，包括所有的提取文件

tailwind.config.js

const { r } = require('./shared')

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    r('./pages/**/*.{uts,uvue}'),
    r('./components/**/*.{uts,uvue}') 
  ],
  corePlugins: {
    preflight: false,
  },
}

假如你需要从更多的目录中提取 CSS Token，你需要添加更多的 glob 表达式在 content 配置中。

---

在完成这 3 步之后， uni-app x 就集成 tailwindcss 原子化样式解决方案。