vite-tailwindcss-uni v0.0.9

vite-tailwindcss-uni

一个在uniapp中兼容使用tailwindcss写法的vite插件，使用postcss的class-rename功能和vite插件的transform功能修改uniapp打包后小程序中不支持的样式名

1、使用方法

需要项目中安装

npm i vite-tailwindcss-uni -D

在vite.config.js中引入

import { tailwindUni, postcssConfig } from 'vite-tailwindcss-uni'
//在vite.config.js的plugins内
plugins: [ 
 // ...其他插件
  tailwindUni({
    //tailwindUni可传入content过滤参数,与tailwind.config.js同步即可，但暂不支持.js文件,以下为默认值
    content: 'src/**/*.{jsx,tsx,vue}' 
  })
],
css: {
  postcss: postcssConfig()
},

需要按tailwind文档在根目录配置tailwind.config.js

module.exports = {
  content: [
    './public/**/*.html',
    './src/**/*.{js,jsx,ts,tsx,vue}'
  ]
}

##注意

写动态class时必须为大括号包小括号的形式，如:class='{"dark:bg-white":dark}'，请改为:class="{'dark:bg-white':dark}",

动态class使用中括号包裹变量名时，变量名不能位于最后一个，如:class="dark"会被转为:class="[dark_" 而发生错误，请改为:class="dark,''"

所以如果组件间传递自定义class时，可以在class前加前缀传递，如:custom-class="text-40px",此时的自定义class才能完成转换

2、支持的写法和打包效果

样式名在打包后的wxml和wxss中同时被替换

自定义数值或颜色如

text-[40px] --> text-_40px_
bg-[#000000]/25 --> bg-__000000__25

所有变体，黑暗模式和screens

md:bg-white --> md_bg-white
dark:bg-white --> dark_bg-white
focus:bg-white --> focus_bg-white

动态class

:class="{'md:bg-white dark:bg-white':true}"
--> 
:class="{'md_bg-white dark_bg-white':true}"