This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

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