uniapp+vite+cli模板引入tailwindcss

于慨2025-05-16 15:00

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