sakanjo / tailwindcss-wh

A Tailwind CSS plugin that provides a shorthand for 'w-x h-x' as 'wh-x'.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Tailwindcss wh

npm bundle size npm license

Tailwindcss wh

Don't write the same number twice.

✨ Help support the maintenance of this package by sponsoring me.

❔ Why

<!-- Tired of writing {n} twice ? -->
<div class="w-12 h-12"></div>

<!-- Write {n} once -->
<div class="wh-12"></div>

πŸ“¦ Installation

npm i -D tailwindcss-wh

πŸ¦„ Usage

Add the plugin to your tailwind.config.js file:

// tailwind.config.js
import wh from 'tailwindcss-wh'

export default {
    // ...

    plugins: [
        wh(),
    ]
}

Specifying selector name

wh({ selector: 'square' }) // square-[15rem]
wh({ selector: 's' }) // s-4

πŸ’– Support the development

Do you like this project? Support it by donating

Click the "πŸ’– Sponsor" at the top of this repo.

©️ Credits

πŸ“„ License

MIT License Β© 2023-PRESENT Salah Kanjo

About

A Tailwind CSS plugin that provides a shorthand for 'w-x h-x' as 'wh-x'.

License:MIT License


Languages

Language:TypeScript 85.9%Language:JavaScript 14.1%