https://github.com/simon-he95/unplugin-atomize-css-uni

兼容小程序中 TailwindCSS 或 UnoCSS 等原子化 css 类名语法不支持的转换
https://github.com/simon-he95/unplugin-atomize-css-uni

tailwind tailwindcss uniapp

Last synced: 2 months ago
JSON representation

兼容小程序中 TailwindCSS 或 UnoCSS 等原子化 css 类名语法不支持的转换

• Host: GitHub
• URL: https://github.com/simon-he95/unplugin-atomize-css-uni
• Owner: Simon-He95
• License: mit
• Created: 2023-08-11T12:19:29.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-04-03T05:42:36.000Z (9 months ago)
• Last Synced: 2024-09-18T04:16:50.828Z (4 months ago)
• Topics: tailwind, tailwindcss, uniapp
• Language: TypeScript
• Homepage:
• Size: 68.4 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: license

Awesome Lists containing this project

README

        
## unplugin-atomize-css-uni

此插件为了解决 `uniapp` 中使用 `TailwindCSS` 或 `UnoCSS`，遇到原子化 css 语法编译到微信小程序 `wxss`，不支持`\[`、`\]`、`#`、`:`、`%`的问题,会将这些不能被 `wxss` 识别的 `class` 转换成以下的形式

## 🌈 Options

- 可以传入Options去覆盖原本的class名，或增加新的不能被识别需要被转换的符号

## 🧰 使用

```typescript

import { vitePlugin as vitePluginAtomizeCssUni } from 'unplugin-atomize-css-uni'

plugins:[

  vitePluginAtomizeCssUni(options)

]

```

## ⚠️ 注意

- 只针对.vue文件和.css文件做转换

```typescript

const tailwindMap: Record = {

  '[': '__brackets__',

  ']': '__brackets__',

  '!': '__important__',

  ':': '__colon__',

  '%': '__percent__',

  '#': '__idSelector__',

}

```

## License

[MIT](./LICENSE) License © 2022 [Simon He](https://github.com/Simon-He95)



![sponsors](https://www.hejian.club/images/sponsors.jpg)