# vite-tailwindcss-uni

**Repository Path**: tungnu/vite-tailwindcss-uni

## Basic Information

- **Project Name**: vite-tailwindcss-uni
- **Description**: 一个在uniapp中兼容使用tailwindcss写法的vite插件，使用postcss的class-rename功能和vite插件的transform功能修改uniapp打包后小程序中不支持的样式名
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-01-06
- **Last Updated**: 2023-06-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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}"
```