目前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 目录下的所有文件],},},综上，问题全部解决，可满足基本行内样式开发需要
)
