https://github.com/leedomjs/tailwindcss-preset
💨「Tailwind CSS配置预设」Leedom's tailwindcss preset
https://github.com/leedomjs/tailwindcss-preset
miniprogram tailwindcss tailwindcss-preset theme-colors
Last synced: 7 months ago
JSON representation
💨「Tailwind CSS配置预设」Leedom's tailwindcss preset
- Host: GitHub
- URL: https://github.com/leedomjs/tailwindcss-preset
- Owner: leedomjs
- License: mit
- Created: 2024-04-25T16:33:34.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-11T16:09:07.000Z (10 months ago)
- Last Synced: 2024-11-20T12:38:06.735Z (7 months ago)
- Topics: miniprogram, tailwindcss, tailwindcss-preset, theme-colors
- Language: TypeScript
- Homepage:
- Size: 438 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @leedomjs/tailwindcss-preset
[](https://www.npmjs.com/package/@leedomjs/tailwindcss-preset)
This package contains:
- [`@leedomjs/tailwindcss-miniprogram-preset`](https://www.npmjs.com/package/@leedomjs/tailwindcss-miniprogram-preset) is designed for miniprogram, and transforms `px` to `rpx`.
- [`@leedomjs/tailwindcss-color-preset`](https://www.npmjs.com/package/@leedomjs/tailwindcss-color-preset) collects some UI Frameworks' theme colors for Tailwind CSS.
## Usage
### Install
```bash
pnpm add -D tailwindcss @leedomjs/tailwindcss-preset
```
### Config `tailwind.config.js`
> [!NOTE]
> There is an object param that contains some fields `mp`, `element`, `naive`, `vant`.
>
> `mp` defaults to `false`, setting `mp` be `true` will enable the preset,
> otherwise will enable default config of tailwindcss and disable the preset meanwhile.
>
> `element`, `naive`, `vant`, these params default to dependencies that your project uses.
>
> If your project depends on `element-ui`, `element-plus`, `naive-ui`, `vant-ui`,the color will be enable automatically. Setting to false will disable the color, otherwise will enabled.
```js
const leedom = require('@leedomjs/tailwindcss-preset')
/** @type {import('tailwindcss').Config} */
module.exports = {
presets: [
leedom({
mp: true,
element: true,
naive: true,
vant: true,
}),
],
content: [...],
theme: {
extend: {},
},
plugins: [],
...
}
```
## Tips
1. Use `-dv-` instead of `/` to generate percentage
2. Use `-` instead of `.`
For example:
``` html
hello, world.
hello, world.
```
## License
[MIT](https://github.com/leedomjs/tailwindcss-preset/blob/main/LICENSE) License © 2024-present [Leedom](https://github.com/leedom92)