https://github.com/sudoaugustin/tailwindcss-shorthand
Useful tailwindcss shorthand classes and variants to boost productivity
https://github.com/sudoaugustin/tailwindcss-shorthand
data-attributes npm-packages shorthands tailwindcss-plugin
Last synced: about 1 year ago
JSON representation
Useful tailwindcss shorthand classes and variants to boost productivity
- Host: GitHub
- URL: https://github.com/sudoaugustin/tailwindcss-shorthand
- Owner: sudoaugustin
- Created: 2024-09-08T14:04:54.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-29T11:57:34.000Z (over 1 year ago)
- Last Synced: 2025-01-12T18:51:39.239Z (over 1 year ago)
- Topics: data-attributes, npm-packages, shorthands, tailwindcss-plugin
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/tailwindcss-shorthand
- Size: 73.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Useful tailwindcss shorthand classes and variants to boost productivity
## Installation
```bash
// NPM
npm install tailwindcss-shorthand --save-dev
// YARN
yarn add tailwindcss-shorthand -D
// PNPM
pnpm add tailwindcss-shorthand -D
```
```javascript
// tailwind.config.js
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [require("tailwindcss-shorthand")()],
};
```
## Utilities
### `a-$wx$h`
```html
// Before
// After
```
#### Arbitrary values
```html
```
If you feel like the built-in `size-5` is long, you can do `a-5`.
### `p-$yx$x`
Extends the built-in `p-*` to declare shorthand padding.
```html
// Before
// After
```
Note: You can still use the built-in padding utilities `p-5` and `p-[5rem]`.
### `m-$yx$x`
Extends the built-in `m-*` to declare shorthand margin.
```html
// Before
// After
```
Note: You can still use the built-in margin utilities `m-5` and `m-[5rem]`.
### `gap-$yx$x`
Extends the built-in `gap-*` to declare shorthand gap.
```html
// Before
// After
```
Note: You can still use the built-in gap utilities `gap-5` and `gap-[5rem]`.
### `z-*`
Extend the built-in `z-*`.
```javascript
// tailwind.config.js
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [
require("tailwindcss-shorthand")({
// Default ["5", "10", "15", "20", "25", "30", "35", "40", "45", "50"]
zIndexes: new Array(50).fill(null).map((_, i) => i + 1),
}),
],
};
```
### Flex alignments
```html
// Before
// After
```
## Variants
### `state-*:`
```TSX
// Before
// After
```
You can also use the `group-state-*` & `peer-state-*` modifiers. To add custom states, see [here](#states).
### `$dataName-$dataValue`
This is a extended version of the `state-*` variant.
```javascript
// tailwind.config.js
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [
require("tailwindcss-shorthand")({
// Default {}
data: {
align: ["left", "center", "women"],
},
}),
],
};
```
```TSX
// Before
// After
```
### `1st`, `2nd`, `3rd`, ..., `10th`
```TSX
// Before
// After
```
> To use the `nth-of-type` selector please use `1st-of`, `2nd-of`, `3rd-of`, ..., `10th-of`.
You can also use the `group-1st*` & `peer-1st*` modifiers. To add custom nths, see [here](#states).
## Options
### `nths`
Use this option to override the default child selectors.
```javascript
// tailwind.config.js
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [
require("tailwindcss-shorthand")({
// Default [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
nths: [11, 99],
}),
],
};
```
```html
```
### `states`
Use this option to override the default states variants.
```javascript
// tailwind.config.js
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [
require("tailwindcss-shorthand")({
// Default ["open", "closed", "active", "inactive", "on", "off", "checked", "unchecked", "visible", "hidden", "expanded", "collapsed", "loading", "loaded", "selected", "success", "error", "enabled", "disabled"]
states: ["pending"],
}),
],
};
```
```html
```
### `separator`
Use the `separator` option to override the default separator(`x`) in shorthand utilities.
```javascript
// tailwind.config.js
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [
require("tailwindcss-shorthand")({
// Default "x"
separator: "-",
}),
],
};
```
```html
```