為什么要引入tailwindcss？

tailwindcss的核心優(yōu)勢：

• CSS不會隨著項目增長而膨脹，不需要重復(fù)造輪子
• 可以快速迭代項目，尤其對于個人開發(fā)者，能夠有效提高生產(chǎn)力
• 提供統(tǒng)一的設(shè)計標準，無需為類的命名煩惱

需要準備添加的文件

• vite.config.js
• tailwind.config.js
• style.css

步驟

1. 用hbuildx新建一個uniapp項目。
2. 使用pnpm進行初始化

> pnpm init

3. 添加相關(guān)依賴

pnpm i -D @tailwindcss/postcss @tailwindcss/vite tailwindcss weapp-tailwindcss

4. 項目根目錄添加vite.config.js文件

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

const isH5 = process.env.UNI_PLATFORM === "h5";
const isApp = process.env.UNI_PLATFORM === "app";
const WeappTailwindcssDisabled = isH5 || isApp;

const resolve = (p) => {
    return path.resolve(__dirname, p);
};

export default defineConfig({
    plugins: [
        uni(),
        uvwt({
            rem2rpx: true,
            disabled: WeappTailwindcssDisabled,
            // 由于 hbuilderx 會改變 process.cwd 所以這里必須傳入當前目錄的絕對路徑
            tailwindcssBasedir: __dirname,
            cssEntries: [
                resolve('./style.css'),
            ]
        })
    ],
    css: {
        postcss: {
            plugins: [
                tailwindcss({
                    base: resolve('./'),
                    optimize: true
                }),
                autoprefixer({}),
            ]
        }
    },
    // 路徑別名
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    },
    // 開發(fā)服務(wù)器（H5 有效）
    server: {
        port: 3000,
        host: '0.0.0.0',
    }
});

5. 項目根目錄添加tailwind.config.js文件

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./pages/**/*.vue", './App.vue'],
  // 2. 核心：禁用全局樣式重置（uni-app 自帶重置）
  corePlugins: {
    preflight: false
  },
  theme: {
    extend: {},
  },
  plugins: [],
}

6. 項目根目錄添加style.css文件

@import "tailwindcss";

tailwindcss快查工具

夢葉的Tailwind - Tailwind CSS 速查表

支持tailwindcss 3.x和tailwindcss 4.x查詢，尤其適合初學(xué)者。