https://github.com/cap-go/tailwindtouno
Convert Tailwind plugin to unocss preset
https://github.com/cap-go/tailwindtouno
Last synced: 7 days ago
JSON representation
Convert Tailwind plugin to unocss preset
- Host: GitHub
- URL: https://github.com/cap-go/tailwindtouno
- Owner: Cap-go
- Created: 2024-02-16T02:07:58.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-16T03:08:10.000Z (about 1 year ago)
- Last Synced: 2024-10-29T23:47:07.156Z (6 months ago)
- Language: JavaScript
- Size: 6.84 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tailwind to Unocss
This is a simple plugin to convert Tailwindcss plugins to Unocss presets.
It's not perfect, contributions are welcome.
## Installation
```bash
npm install --save-dev tailwindtouno
```
## Usage
The way tailwind plugins work require to give the unoConfig to the tailwindToUno function.
That why the unoConfig is declared before using tailwindToUno function.
If you use many tailwind plugins, repeat the 2 last lines for each plugin.
```typescript
import { defineConfig, presetAttributify, presetUno } from 'unocss'
import { pluginToPreset, TailwindColorToUno, TailwindThemeToUno } from 'tailwindtouno';
import containerQueries from 'tailwindcss/container-queries';
import { colors } from 'tailwindcss/colors';
const unoConfig = defineConfig({
presets: [
presetAttributify({ /* preset options */}),
presetUno(),
],
theme: {
extend: {
colors: {
...TailwindColorToUno(colors),
},
...TailwindThemeToUno({
extend: {
screens: {
'3xl': '1600px',
},
},
}),
}
}
})
const presetRes = pluginToPreset('tailwindContainerQueries', containerQueries, unoConfig)
unoConfig.presets.push(presetRes)
export default unoConfig
```