https://github.com/cap-go/tailwindtouno
Convert Tailwind plugin to unocss preset
https://github.com/cap-go/tailwindtouno
Last synced: 11 months 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 (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-16T03:08:10.000Z (over 2 years ago)
- Last Synced: 2024-10-29T23:47:07.156Z (over 1 year 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
```