Tailwindcss Shortcuts

Use functions to generate tailwindcss classes.

size(16) // w-16 h-16
margin(24, 32) // my-24 mx-32

Install

npm i tailwind-shortcuts

Functions

• Backgrounds
• Borders
  • Border
  • Border Width
  • Rounded
  • Rounded X
  • Rounded Y
• Flexbox
  • Flex
  • Flex Item
• Layout
  • Object
  • Overflow
  • Place
  • Position
• Sizing
  • Size
  • Max Size
  • Min Size
• Spacing
  • Margin
  • Padding
• Svg
• Typo
  • Font
  • List
  • Text
• Prefix
  • Screen
  • Breakpoints
  • Dom Status
  • Nth-child
• Extra
  • Custom
  • Reset

Backgrounds

bg(...attributes)

Tailwind classes

• Background Attachment
• Background Color
• Background Position
• Background Repeat
• Background Size

import { bg } from 'tailwind-shortcuts'

// Or
import bg from 'tailwind-shortcuts/bg'

bg('repeat', 'cover', 'fixed')
// Become: 'bg-repeat bg-cover bg-fixed'

Class alias: full-cover

bg('full-cover') // Become: bg-cover bg-no-repeat bg-center

Borders

Border

border(width: (string | number)[], style?: string, color?: string)

Check Border Width for more info.

Tailwind Classes

• Border Color
• Border Style
• Border Width

import { border } from 'tailwind-shortcuts'

// Or
import { border } from 'tailwind-shortcuts/border'

border()
// Become: 'border'

border('default', 'solid', 'black')
// Become: 'border border-solid border-black'

border(1, 'solid', 'black')
// Become: 'border-1 border-solid border-black'

border([1, 2], 'solid', 'black')
// Become: 'border-t-1 border-r-2 border-b-1 border-l-2 border-solid border-black'

Border Width

border(top, right, bottom, left)

Simliar to border-width css

Tailwind Classes

• Border Width

import { borderWidth } from 'tailwind-shortcuts'

// Or
import { borderWidth } from 'tailwind-shortcuts/border'

borderWidth()
// Become: 'border'

borderWidth(1)
// Become: 'border-1'
// border-width: 1px;

borderWidth(1, 2)
// Become: 'border-t-1 border-r-2 border-b-1 border-l-2'
// border-width: 1px 2px;

borderWidth(1, 2, 3)
// Become: 'border-t-1 border-r-2 border-b-3 border-l-2'
// border-width: 1px 2px 3px;

borderWidth(1, 2, 3, 4)
// Become: 'border-t-1 border-r-2 border-b-3 border-l-4'
// border-width: 1px 2px 3px 4px;

Rounded

rounded(topLeft, topRight, bottomRight, bottomLeft)

Simliar to border-radius css

Tailwind Classes

• Border Radius

import { rounded } from 'tailwind-shortcuts'

// Or
import { rounded } from 'tailwind-shortcuts/rounded'

rounded()
// Become: 'rounded'

rounded(1)
// Become: 'rounded-1'
// border-radius: 1px;

rounded(1, 2)
// Become: 'rounded-tl-1 rounded-tr-2 rounded-br-1 rounded-bl-2'
// border-radius: 1px 2px;

rounded(1, 2, 3)
// Become: 'rounded-tl-1 rounded-tr-2 rounded-br-3 rounded-bl-2'
// border-radius: 1px 2px 3px;

rounded(1, 2, 3, 4)
// Become: 'rounded-tl-1 rounded-tr-2 rounded-br-3 rounded-bl-4'
// border-radius: 1px 2px 3px 4px;

Rounded X

roundedY(top, bottom)

Tailwind Classes

• Border Radius

import { roundedY } from 'tailwind-shortcuts'

// Or
import { roundedX } from 'tailwind-shortcuts/rounded'

roundedX()
// Become: 'rounded-r rounded-l'

roundedX(1)
// Become: 'rounded-r-1 rounded-l-1'
// border-radius: 1px;

roundedX(1, 2)
// Become: 'rounded-r-1 rounded-l-2'
// border-radius: 2px 1px 1px 2px;

Rounded Y

roundedY(left, right)

Tailwind Classes

• Border Radius

import { roundedY } from 'tailwind-shortcuts'

// Or
import { roundedY } from 'tailwind-shortcuts/rounded'

roundedY()
// Become: 'rounded-t rounded-b'

rounded(1)
// Become: 'rounded-t-t rounded-b-1'
// border-radius: 1px;

rounded(1, 2)
// Become: 'rounded-t-1 rounded-b-2'
// border-radius: 1px 1px 2px 2px;

Flexbox

Flex

flex(...attributes)

Attributes: inline, row, row-reverse, col, col-reverse, no-wrap, wrap, wrap-reverse, middle

Tailwind Classes

• Flex Direction
• Flex Wrap

import { flex } from 'tailwind-shortcuts'

// Or
import { flex } from 'tailwind-shortcuts/flexbox'

flex()
// Become: 'flex'

flex('inline')
// Become: 'inline-flex'

flex('col', 'wrap')
// Become: 'flex-col flex-wrap'

Special keyword: middle

flex('middle')
// Become: 'justify-center items-center'

Flex Item

flexItem(...attributes)

Attributes: initial, 1, auto, none, grow, grow-0, shrink, shrink-0

Tailwind Classes

• Flex
• Flex Grow
• Flex Shrink

import { flexItem } from 'tailwind-shortcuts'

// Or
import { flexItem } from 'tailwind-shortcuts/flexbox'

flexItem('grow', 'shrink-0')
// Become: 'flex-grow flex-shrink-0'

Layout

Object

object(...attributes)

Tailwind Classes

• Object Fit
• Object Position

import { object } from 'tailwind-shortcuts'

// Or
import { object } from 'tailwind-shortcuts/layout'

object('cover', 'center')
// Become: 'object-cover object-center'

Overflow

overflow(y, x)

Tailwind Classes

• Overflow

import { overflow } from 'tailwind-shortcuts'

// Or
import { overflow } from 'tailwind-shortcuts/layout'

overflow('scroll')
// Become: 'overflow-scroll'

overflow('hidden', 'auto')
// Become: 'overflow-y-hidden overflow-x-auto'

Place

place(top, right, bottom, left)

Tailwind Classes

• Top / Right / Bottom / Left

import { place } from 'tailwind-shortcuts'

// Or
import { place } from 'tailwind-shortcuts/layout'

place(0)
// Become: 'inset-0'

place(0, 1)
// Become: 'inset-y-0 inset-x-1'

place(0, 1, 2)
// Become: 'top-0 inset-x-1 bottom-2'

place(0, 1, 2, 3)
// Become: 'top-0 right-1 bottom-2 left-3'

place(0, -1, 2, -3)
// Become: 'top-0 -right-1 bottom-2 -left-3'

Position

Same usage as Place

absolute(top, right, bottom, left)
relative(top, right, bottom, left)
fixed(top, right, bottom, left)
sticky(top, right, bottom, left)

Tailwind Classes

• Top / Right / Bottom / Left

import { absolute, relative, fixed, sticky } from 'tailwind-shortcuts'

// Or
import { absolute, relative, fixed, sticky } from 'tailwind-shortcuts/layout'

absolute('auto')
// Become: 'absolute inset-auto'

relative(0)
// Become: 'relative inset-0'

fixed(0, 1)
// Become: 'fixed inset-y-0 inset-x-1'

sticky(0, 1, 2)
// Become: 'sticky top-0 inset-x-1 bottom-2'

Sizing

Size

size(width, height = width)

Tailwind Classes

• Width
• Height

import { size } from 'tailwind-shortcuts'

// Or
import { size } from 'tailwind-shortcuts/sizing'

size(0)
// Become: 'w-0 h-0'

size(24, 32)
// Become: 'w-24 h-32'

size(24, '')
// Become: 'w-24'

Max Size

maxSize(width, height = width)

Tailwind Classes

• Max Width
• Max Height

import { maxSize } from 'tailwind-shortcuts'

// Or
import { maxSize } from 'tailwind-shortcuts/sizing'

maxSize(0)
// Become: 'max-w-0 max-h-0'

maxSize(24, 32)
// Become: 'max-w-24 max-h-32'

Min Size

minSize(width, height = width)

Tailwind Classes

• Min Width
• Min Height

import { minSize } from 'tailwind-shortcuts'

// Or
import { minSize } from 'tailwind-shortcuts/sizing'

minSize(0)
// Become: 'min-w-0 min-h-0'

minSize(24, 32)
// Become: 'min-w-24 min-h-32'

Spacing

Margin

margin(top, right, bottom, left)

Tailwind Classes

• Margin

import { margin } from 'tailwind-shortcuts'

// Or
import { margin } from 'tailwind-shortcuts/spacing'

margin(0)
// Become: 'm-0'

margin(1, 2)
// Become: 'my-1 mx-2'

margin(1, 2, 3)
// Become: 'mt-1 mx-2 mb-3'

margin(1, 2, 3, 4)
// Become: 'mt-1 mr-2 mb-3 ml-4'

margin(1, -2, 3, -4)
// Become: 'mt-1 -mr-2 mb-3 -ml-4'

Padding

padding(top, right, bottom, left)

Tailwind Classes

• Padding

import { padding } from 'tailwind-shortcuts'

// Or
import { padding } from 'tailwind-shortcuts/spacing'

padding(0)
// Become: 'p-0'

padding(1, 2)
// Become: 'py-1 px-2'

padding(1, 2, 3)
// Become: 'pt-1 px-2 pb-3'

padding(1, 2, 3, 4)
// Become: 'pt-1 pr-2 pb-3 pl-4'

Svg

svg(...attributes)

Attributes: fill, stroke

Tailwind Classes

• Fill
• Stroke

import { svg } from 'tailwind-shortcuts'

// Or
import { svg } from 'tailwind-shortcuts/svg'

svg('fill')
// Become: 'fill-current'

svg('fill', 'stroke')
// Become: 'fill-current stroke-current'

Typo

Font

font(...attributes)

Tailwind Classes

• Font Family
• Font Smoothing
• Font Style
• Font Weight

import { font } from 'tailwind-shortcuts'

// Or
import { font } from 'tailwind-shortcuts/typo'

font('sans', 'bold')
// Become: 'font-sans font-bold'

Special keyword: smooth, i

font('smooth')
// Become: 'antialiased'

font('i')
// Become: 'italic'

List

list(...attributes)

Tailwind Classes

• List Style Type
• List Style Position

import { list } from 'tailwind-shortcuts'

// Or
import { list } from 'tailwind-shortcuts/typo'

list('decimal', 'inside')
// Become: 'list-decimal list-inside'

Text

text(...attributes)

Tailwind Classes

• Font Size
• Text Align
• Text Color
• Text Transform

import { text } from 'tailwind-shortcuts'

// Or
import { text } from 'tailwind-shortcuts/typo'

text('xl', 'center', 'black')
// Become: 'text-xl text-center text-black'

Special keyword: upper, lower, cap

text('upper')
// Become: 'uppercase'

text('lower')
// Become: 'lowercase'

text('cap')
// Become: 'capitalize'

Prefix

Screen

screen(breakpoint, ...classes)

// Currying
screen(breakpoint)(...classes)

Tailwind Classes

• Breakpoints

import { screen } from 'tailwind-shortcuts'

// Or
import { screen } from 'tailwind-shortcuts/prefix'

screen('md', 'w-320', 'mx-16', 'text-xl')
// Become: 'md:w-320 md:mx-16 md:text-xl'

// Currying
const md = screen('md')
md('w-320', 'mx-16', 'text-xl')
// Become: 'md:w-320 md:mx-16 md:text-xl'

Breakpoints

breakpoints(breakpointObject, ...classes)

Tailwind Classes

• Breakpoints

import { breakpoints } from 'tailwind-shortcuts'

// Or
import { breakpoints } from 'tailwind-shortcuts/prefix'

breakpoints({
    md: 'w-320 mx-16 text-xl'
    lg: 'w-640 mx-32 text-2xl'
})
// Become: 'md:w-320 md:mx-16 md:text-xl lg:w-640 lg:mx-32 lg:text-2xl'

Dom Status

status(variant, ...classes)

// Currying
status(variant)(...classes)

Variants: 'hover', 'focus', 'active', 'group-hover', 'focus-within', 'disabled', 'visited'

Tailwind Classes

• Configuring Variants

import { status } from 'tailwind-shortcuts'

// Or
import { status } from 'tailwind-shortcuts/prefix'

status('hover', 'w-320', 'mx-16', 'text-xl')
// Become: 'hover:w-320 hover:mx-16 hover:text-xl'

// Currying
const hover = status('hover')
hover('w-320', 'mx-16', 'text-xl')
// Become: 'hover:w-320 hover:mx-16 hover:text-xl'

Nth-child

child(variant, ...classes)

// Currying
child(variant)(...classes)

Variants: 'first', 'last', 'odd', 'even'

Tailwind Classes

• Configuring Variants

import { child } from 'tailwind-shortcuts'

// Or
import { child } from 'tailwind-shortcuts/prefix'

child('first', 'w-320', 'mx-16', 'text-xl')
// Become: 'first:w-320 first:mx-16 first:text-xl'

// Currying
const first = child('first')
first('w-320', 'mx-16', 'text-xl')
// Become: 'first:w-320 first:mx-16 first:text-xl'

Extra

Custom

Generate classes from plugins

custom(name, ...attributes)

// Currying
custom(name)(...attributes)

import { custom } from 'tailwind-shortcuts'

// Or
import { custom } from 'tailwind-shortcuts/extra'

custom('transition', 'all', 100, 'ease')
// Become: 'transition-all transition-100 transition-ease'

// Currying
const transition = custom('transition')
transition('all', 100, 'ease')
// Become: 'transition-all transition-100 transition-ease'

Reset

Add some reset classes you might need it

reset(domName)

Dom Name: a, input, button

import { reset } from 'tailwind-shortcuts'

// Or
import { reset } from 'tailwind-shortcuts/extra'

reset('a')
// Become: 'outline-none no-underline'

reset('input')
// Become: 'outline-none'

reset('button')
// Become: 'focus:outline-none'

Usage

JSX

<div className={`size(16) m-24`}></div>

With classnames

classnames(
    `absolute ${place-0}`,
    {
        [`${margin(0, 16)}`]: true
    }
)

Add Prefix

const xl = screen('xl')
const hover = status('hover')
xl(hover('mx-3', rounded(1), size(40)))

// Become: 'xl:hover:mx-3 xl:hover:rounded-1 xl:hover:w-40 xl:hover:h-40'

License

MIT