https://github.com/sakanjo/tailwindcss-wh

A Tailwind CSS plugin that provides a shorthand for 'w-x h-x' as 'wh-x'.
https://github.com/sakanjo/tailwindcss-wh

tailwindcss tailwindcss-plugin tailwindcss-v3 width-height

Last synced: 9 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/sakanjo/tailwindcss-wh
• Owner: sakanjo
• License: mit
• Created: 2023-10-10T08:06:36.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-10-23T18:30:36.000Z (over 2 years ago)
• Last Synced: 2025-09-21T02:56:47.295Z (9 months ago)
• Topics: tailwindcss, tailwindcss-plugin, tailwindcss-v3, width-height
• Language: TypeScript
• Homepage:
• Size: 260 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

          
![Tailwindcss wh](./img/banner.png)



    

    

    



Tailwindcss wh


Don't write the same number twice.


> ✨ Help support the maintenance of this package by [sponsoring me](https://github.com/sponsors/sakanjo).

## ❔ Why

```html





```


## 📦 Installation

```

npm i -D tailwindcss-wh

```

## 🦄 Usage

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

```js

// tailwind.config.js

import wh from 'tailwindcss-wh'

export default {

    // ...

    plugins: [

        wh(),

    ]

}

```

### Specifying selector name

```js

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"](https://github.com/sponsors/sakanjo) at the top of this repo.

## ©️ Credits

- [Salah Kanjo](https://github.com/sakanjo)

- [All Contributors](../../contributors)

## 📄 License

[MIT License](https://github.com/sakanjo/tailwindcss-wh/blob/master/LICENSE) © 2023-PRESENT [Salah Kanjo](https://github.com/sakanjo)