Tailwindcss Shortcuts
Use functions to generate tailwindcss classes.
// w-16 h-16 // my-24 mx-32
Install
npm i tailwind-shortcuts
Functions
Backgrounds
bg...attributes
Tailwind classes
// Or // Become: 'bg-repeat bg-cover bg-fixed'
Class alias: full-cover
// Become: bg-cover bg-no-repeat bg-center
Borders
Border
borderwidth: string | number, style?: string, color?: string
Check Border Width for more info.
Tailwind Classes
// Or // Become: 'border' // Become: 'border border-solid border-black' // Become: 'border-1 border-solid border-black' // Become: 'border-t-1 border-r-2 border-b-1 border-l-2 border-solid border-black'
Border Width
bordertop, right, bottom, left
Simliar to border-width
css
Tailwind Classes
// Or // Become: 'border' // Become: 'border-1'// border-width: 1px; // Become: 'border-t-1 border-r-2 border-b-1 border-l-2'// border-width: 1px 2px; // Become: 'border-t-1 border-r-2 border-b-3 border-l-2'// border-width: 1px 2px 3px; // Become: 'border-t-1 border-r-2 border-b-3 border-l-4'// border-width: 1px 2px 3px 4px;
Rounded
roundedtopLeft, topRight, bottomRight, bottomLeft
Simliar to border-radius
css
Tailwind Classes
// Or // Become: 'rounded' // Become: 'rounded-1'// border-radius: 1px; // Become: 'rounded-tl-1 rounded-tr-2 rounded-br-1 rounded-bl-2'// border-radius: 1px 2px; // Become: 'rounded-tl-1 rounded-tr-2 rounded-br-3 rounded-bl-2'// border-radius: 1px 2px 3px; // Become: 'rounded-tl-1 rounded-tr-2 rounded-br-3 rounded-bl-4'// border-radius: 1px 2px 3px 4px;
Rounded X
roundedYtop, bottom
Tailwind Classes
// Or // Become: 'rounded-r rounded-l' // Become: 'rounded-r-1 rounded-l-1'// border-radius: 1px; // Become: 'rounded-r-1 rounded-l-2'// border-radius: 2px 1px 1px 2px;
Rounded Y
roundedYleft, right
Tailwind Classes
// Or // Become: 'rounded-t rounded-b' // Become: 'rounded-t-t rounded-b-1'// border-radius: 1px; // 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
// Or // Become: 'flex' // Become: 'inline-flex' // Become: 'flex-col flex-wrap'
Special keyword: middle
// Become: 'justify-center items-center'
Flex Item
flexItem...attributes
Attributes: initial
, 1
, auto
, none
, grow
, grow-0
, shrink
, shrink-0
Tailwind Classes
// Or // Become: 'flex-grow flex-shrink-0'
Layout
Object
object...attributes
Tailwind Classes
// Or // Become: 'object-cover object-center'
Overflow
overflowy, x
Tailwind Classes
// Or // Become: 'overflow-scroll' // Become: 'overflow-y-hidden overflow-x-auto'
Place
placetop, right, bottom, left
Tailwind Classes
// Or // Become: 'inset-0' // Become: 'inset-y-0 inset-x-1' // Become: 'top-0 inset-x-1 bottom-2' // Become: 'top-0 right-1 bottom-2 left-3' // Become: 'top-0 -right-1 bottom-2 -left-3'
Position
Same usage as Place
absolutetop, right, bottom, leftrelativetop, right, bottom, leftfixedtop, right, bottom, leftstickytop, right, bottom, left
Tailwind Classes
// Or // Become: 'absolute inset-auto' // Become: 'relative inset-0' // Become: 'fixed inset-y-0 inset-x-1' // Become: 'sticky top-0 inset-x-1 bottom-2'
Sizing
Size
sizewidth, height = width
Tailwind Classes
// Or // Become: 'w-0 h-0' // Become: 'w-24 h-32' // Become: 'w-24'
Max Size
maxSizewidth, height = width
Tailwind Classes
// Or // Become: 'max-w-0 max-h-0' // Become: 'max-w-24 max-h-32'
Min Size
minSizewidth, height = width
Tailwind Classes
// Or // Become: 'min-w-0 min-h-0' // Become: 'min-w-24 min-h-32'
Spacing
Margin
margintop, right, bottom, left
Tailwind Classes
// Or // Become: 'm-0' // Become: 'my-1 mx-2' // Become: 'mt-1 mx-2 mb-3' // Become: 'mt-1 mr-2 mb-3 ml-4' // Become: 'mt-1 -mr-2 mb-3 -ml-4'
Padding
paddingtop, right, bottom, left
Tailwind Classes
// Or // Become: 'p-0' // Become: 'py-1 px-2' // Become: 'pt-1 px-2 pb-3' // Become: 'pt-1 pr-2 pb-3 pl-4'
Svg
svg...attributes
Attributes: fill
, stroke
Tailwind Classes
// Or // Become: 'fill-current' // Become: 'fill-current stroke-current'
Typo
Font
font...attributes
Tailwind Classes
// Or // Become: 'font-sans font-bold'
Special keyword: smooth
, i
// Become: 'antialiased' // Become: 'italic'
List
list...attributes
Tailwind Classes
// Or // Become: 'list-decimal list-inside'
Text
text...attributes
Tailwind Classes
// Or // Become: 'text-xl text-center text-black'
Special keyword: upper
, lower
, cap
// Become: 'uppercase' // Become: 'lowercase' // Become: 'capitalize'
Prefix
Screen
screenbreakpoint, ...classes // Curryingscreenbreakpoint...classes
Tailwind Classes
// Or screen'md' 'w-320' 'mx-16' 'text-xl'// Become: 'md:w-320 md:mx-16 md:text-xl' // Curryingconst md = screen'md'// Become: 'md:w-320 md:mx-16 md:text-xl'
Breakpoints
breakpointsbreakpointObject, ...classes
Tailwind Classes
// Or // Become: 'md:w-320 md:mx-16 md:text-xl lg:w-640 lg:mx-32 lg:text-2xl'
Dom Status
statusvariant, ...classes // Curryingstatusvariant...classes
Variants: 'hover', 'focus', 'active', 'group-hover', 'focus-within', 'disabled', 'visited'
Tailwind Classes
// Or // Become: 'hover:w-320 hover:mx-16 hover:text-xl' // Curryingconst hover = // Become: 'hover:w-320 hover:mx-16 hover:text-xl'
Nth-child
childvariant, ...classes // Curryingchildvariant...classes
Variants: 'first', 'last', 'odd', 'even'
Tailwind Classes
// Or // Become: 'first:w-320 first:mx-16 first:text-xl' // Curryingconst first = // Become: 'first:w-320 first:mx-16 first:text-xl'
Extra
Custom
Generate classes from plugins
customname, ...attributes // Curryingcustomname...attributes
// Or // Become: 'transition-all transition-100 transition-ease' // Curryingconst transition = // Become: 'transition-all transition-100 transition-ease'
Reset
Add some reset classes you might need it
resetdomName
Dom Name: a
, input
, button
// Or // Become: 'outline-none no-underline' // Become: 'outline-none' // Become: 'focus:outline-none'
Usage
JSX
<div =></div>
classnames
With
Add Prefix
const xl = screen'xl'const hover = // Become: 'xl:hover:mx-3 xl:hover:rounded-1 xl:hover:w-40 xl:hover:h-40'
License
MIT