目前vite+cli方式用的都是官方提供的模板，vite版本還是4.14版本，較舊，而tailwindcss已經有了4版本，實際發現引入最新版會報錯，因而繼續使用3.3.5版本??
pnpm install tailwindcss@3.3.5 @uni-helper/vite-plugin-uni-tailwind -D@uni-helper/vite-plugin-uni-tailwind是讓小程序也支持tailwindcss的插件??
tailwind.config.ts??
module.exports = {content: ['index.html', './src/**/*.{html,js,ts,vue}'],theme: {extend: {},},plugins: [], }
postcss.config.ts??
module.exports = {plugins: {tailwindcss: {},autoprefixer: {},}, }
vite.config.ts??
import tailwindcss from 'tailwindcss' import uniTailwind from '@uni-helper/vite-plugin-uni-tailwind' plugins: [uniTailwind()],css: {postcss: {plugins: [...cssPlugins, tailwindcss],ignore: ['node_modules/**', // 忽略 node_modules 目錄下的所有文件],},},
tailwind.css??
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
main.ts??
import '@/static/css/tailwind.css'
某.vue文件中測試??
<view class="title-box pt-1">{{ $t('活躍交易者的新黎明') }}</view>??
起作用了，但是px-1, 默認的單位是rem，現在我需要改成和當前項目一樣，非小程序單位是vw，小程序是rpx??
tailwind.config.ts??
module.exports = {content: ['index.html', './src/**/*.{html,js,ts,vue}'],theme: {extend: {},spacing: {// 影響：padding、margin、width、height0: '0px',1: '10px',2: '20px',3: '30px',4: '40px',5: '50px',6: '60px',7: '70px',8: '80px',9: '90px',10: '10px',},},plugins: [], }目前還有點問題，就是例如text-[10px]沒有被postcss插件轉換成vw??
解決：tailwind插件要作為postcss第一個插件才行，之前放反了位置??
plugins: [uniTailwind()],css: {postcss: {plugins: [tailwindcss, ...cssPlugins],ignore: ['node_modules/**', // 忽略 node_modules 目錄下的所有文件],},},綜上，問題全部解決，可滿足基本行內樣式開發需要
)
