@leedomjs/tailwindcss-preset
v0.4.0
Published
tailwindcss preset
Downloads
122
Maintainers
Readme
@leedomjs/tailwindcss-preset
This package contains:
@leedomjs/tailwindcss-miniprogram-preset
is designed for miniprogram, and transformspx
torpx
.@leedomjs/tailwindcss-color-preset
collects some UI Frameworks' theme colors for Tailwind CSS.
Usage
Install
pnpm add -D tailwindcss @leedomjs/tailwindcss-preset
Config tailwind.config.js
/** @type {import('tailwindcss').Config} */
const preset = require('@leedomjs/tailwindcss-preset')
module.exports = {
presets: [
/**
* 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 false, setting to true will enable the color.
* If your project depends on `element-ui`, `element-plus`, `naive-ui`, `vant-ui`, the color will be enable automatically, even though you set value to false.
*
*/
preset({
mp: true,
element: true,
naive: true,
vant: true,
}),
],
content: [...],
theme: {
extend: {},
},
plugins: [],
...
}
Tips
- Use
-dv-
instead of/
to generate percentage - Use
-
instead of.
For example:
<!-- w-1/2 = w-1-dv-2 -->
<div class="w-1/2 w-1-dv-2">hello, world.</div>
<!-- w-1.5 = w-1-5 -->
<div class="w-1.5 w-1-5">hello, world.</div>