Skip to content

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

License

Notifications You must be signed in to change notification settings

sakanjo/tailwindcss-wh

Repository files navigation

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