在小程序中常規(guī)的方式安裝taiwindcss會在小程序中報(bào)錯(cuò)，所以需要用兼容的寫法安裝。這里介紹使用vue-cli創(chuàng)建的uniapp項(xiàng)目，按我的步驟操作就好。

安裝依賴

npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss-class-rename -D
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

初始化配置文件

npx tailwindcss-cli@latest init

這步會生成tailwindcss.config文件，如果沒有生成，也可以自己手動在根目錄創(chuàng)建

修改tailwindcss.config.js文件

module.exports = {
  purge: ['./public/index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false,
  separator: '__', // 兼容小程序，將 : 替換成 __
  theme: {
    // 兼容小程序，將默認(rèn)配置里帶 .和/ 清除
    // 如果有些屬性你沒有用到，請?jiān)?corePlugins 里禁用
    extend: {},
    fontSize: {},
    height: {},
    inset: {},
    screens: {},
    spacing: {},
    translate: {},
    width: {}
  },
  variants: {},
  plugins: [],
  corePlugins: {
    // 兼容小程序，將帶有 * 選擇器的插件禁用
    preflight: false,
    space: false,
    divideColor: false,
    divideOpacity: false,
    divideStyle: false,
    divideWidth: false
  }
}

修改postcss.config.js文件

主要是修改plugins部分，加入以下代碼，加在require(‘@dcloudio/vue-cli-plugin-uni/packages/postcss’)這行之前

require('tailwindcss')({ config: "./tailwind.config.js" }),
// 使用postcss-class-name 包將小程序不支持的類名寫法轉(zhuǎn)換為支持的類名，如："hover:xxx"
require('postcss-class-rename')({
  "\\\\:": "--",
  "\\\\/": "--",
  "\\\\.": "--",
  ".:": "--",
  "\\\*": "--"
}),

修改tsconfig.json文件

和compilerOptions字段同級，修改這個(gè)paths，如果已經(jīng)存在，這步跳過

"paths": {
  "@/*": ["./src/*"]
}

引入taiwindcss

• 在src 目錄新建 style 文件夾并創(chuàng)建tailwind.css文件，并寫入

@tailwind base;
@tailwind components;
@tailwind utilities;

• 在src 目錄下的main.js里面引用

import '@/style/tailwind.css'

• 在src 目錄下的App.vue里面引用

@import 'tailwindcss/tailwind.css';

在項(xiàng)目中使用

試試在src/pages目錄下任意頁面使用，能看到背景顏色出現(xiàn)，說明安裝引入成功，可能mb-10會不生效，原因是taiwindcss使用rem，小程序使用rpx單位，需要做兼容處理¹。

<view class="bg-red-100 mb-10">taiwindcss</view>

依賴說明

需要安裝以下依賴才可以，如果缺少哪個(gè)，就自己單獨(dú)安裝，比如缺了postcss-loader，那就npm i postcss-loader -D

"@tailwindcss/postcss7-compat": "^2.2.17",
"autoprefixer": "^9.8.8",
"postcss": "^7.0.39",
"postcss-class-rename": "^1.0.1",
"postcss-comment": "^2.0.0",
"postcss-loader": "^7.0.2",
"postcss-remove-selectors": "^2.0.1",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"

到了這里，關(guān)于uni-app 使用 tailwindcss 兼容小程序的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！