当前位置：首页 > news >正文

uniapp+vite+cli模板引入tailwindcss

news 2025/5/16 8:44:21

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