tailwindcss-plugin-width-height

KO | EN

gitlite — search

#javascript #react #ai #typescript #llm #go #machine-learning #linux #nodejs #windows #awesome #kubernetes #awesome-list #pytorch

tailwindcss-plugin-width-height

(★ 11)

Square aspect ratio `.wh-*` size utility classes plugin for Tailwind css.

tailwindcss-plugin-width-height 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# tailwindcss-plugin-width-height

Square `.wh-*` size utility classes for Tailwind css. For when you want a DRY way to describe a square-sized element (profile image, close button, div container, etc.).

For Tailwind v1.0:
```bash
npm install --save-dev @ky-is/tailwindcss-plugin-width-height
```

For Tailwind v0.x:
```bash
npm install --save-dev @ky-is/tailwindcss-plugin-width-height@0
```

## Example

A circular avatar:
```html
<img class="wh-16 rounded-full" />
```
Is equivalent to:
```html
<img class="w-16 h-16 rounded-full" />
```

## Config

In your tailwind js configuration file:
```js
  plugins: [
    require('@ky-is/tailwindcss-plugin-width-height')({ variants: ['responsive'] }),
  ],
```

## Options

- `variants` (string[], optional): `responsive`, `hover`, `focus`, `active`, `group-hover`
- `sizes` (object, optional): Custom sizes to generate (in the same format as `width` and `height` from your config file). If you don't provide this value, it defaults to the intersection of the `width` and `height` values from your config.

tailwindcss-plugin-width-height

tailwindcss-plugin-width-height 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

tailwindcss-plugin-width-height

tailwindcss-plugin-width-height 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README