微信小程序使用 Tailwind CSS version 3

可复制直接丢入 AI 运行

检查 package.json 文件

如果目录下，没有 package.json 文件, 需要执行命令，或者手动创建一下:

运行 npm init -y

使用包管理器安装 `tailwindcss`

kotlin 复制代码

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

csharp 复制代码

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

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

java 复制代码

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

配置 `tailwind.config.js`

java 复制代码

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
      // 添加你需要提取的文件目录
      'components/**/*.{wxml,js,ts}',
      'pages/**/*.{wxml,js,ts}',
      // 不要使用下方的写法，这会导致 vite 开发时监听文件数量爆炸
      // '**/*.{js,ts,wxml}', '!node_modules/**', '!dist/**'
    ],
    // 假如你使用 ts 模板，则可以使用下方的配置
    // content: ['miniprogram/**/*.{ts,js,wxml}'],
    corePlugins: {
      // 小程序不需要 preflight 和 container，因为这主要是给 h5 的，如果你要同时开发小程序和 h5 端，你应该使用环境变量来控制它
      preflight: false,
      container: false,
    }
  }

引入 `tailwindcss`

在你的小程序项目入口 app.wxss 文件中，引入 tailwindcss 使它在小程序全局生效

less 复制代码

/**app.wxss**/
@tailwind base;
@tailwind components;
@tailwind utilities;

在 app.wxss 加入这一段代码之后，微信开发者工具会报错，因为还没有完全配置好。

安装 weapp-tailwindcss 插件并运行

arduino 复制代码

npm install -D 'weapp-tailwindcss@^3' 'weapp-vite@^3'

执行初始化命令

csharp 复制代码

npx weapp-vite init

这个命令会对现有的原生小程序项目，进行 weapp-vite 的初始化

执行后，会发现主要有许多文件改动，CLI 主要做了 3 件事情:

创建 vite.config.ts 文件，这个是 weapp-vite 和 vite 的配置文件
修改 package.json, 添加 dev 和 build 开发和构建脚本，还有构建 npm 和打开微信开发者工具
修改 project.config.json 内容，来适配构建产物
添加适配 vite 的 dts 和 tsconfig.json

安装所有的依赖包

在执行完成 weapp-vite init 初始化命令之后，需要在项目里执行一下安装命令:

css 复制代码

npm i

注册插件

给 package.json 添加下列脚本:

json 复制代码

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

在 vite.config.ts 里对插件进行注册:

javascript 复制代码

import { defineConfig } from 'weapp-vite/config'
import { UnifiedViteWeappTailwindcssPlugin as uvwt } from 'weapp-tailwindcss/vite'

export default defineConfig({
  plugins: [
    uvwt({
      rem2rpx: true,
    }),
  ],
})

开始运行

使用 npm run dev 进入开发模式, 此模式带有热更新的，主要用于开发

使用 npm run build 进行构建

原生组件样式的隔离性

提示

发现很多用户，在使用原生开发的时候，经常会问，为什么 tailwindcss 样式对自定义组件不生效。

这可能有以下几个原因:

代码文件不在 tailwind.config.js 的 content 配置内
原生小程序组件是默认开启 组件样式隔离 的，默认情况下，自定义组件的样式只受到自定义组件 wxss 的影响。而 tailwindcss 生成的工具类，都在 app.wxss 这个全局样式文件里面。不属于组件内部，自然不生效。

这时候可以在你组件的 json 文件配置中，设置下面一行 styleIsolation 来开启样式共享:

json 复制代码

{  "styleIsolation": "apply-shared"}

apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；

来让组件应用到 app.wxss 里的样式。