0.8.0 • Published 1 year ago

@leedomjs/tailwindcss-preset v0.8.0

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

@leedomjs/tailwindcss-preset

npm

This package contains:

Usage

Install

pnpm add -D tailwindcss @leedomjs/tailwindcss-preset

Config tailwind.config.js

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.

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:

<!-- 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>

License

MIT License © 2024-present Leedom