Tailwind ts¶

// flex container
flex            // display: flex
inline-flex     // display: inline-flex
flex-col        // flex-direction: column
flex-row        // flex-direction: row
flex-1          // flex: 1 1 0%

// alignment
items-center    // align-items: center
items-start     // align-items: flex-start
items-end       // align-items: flex-end
justify-between // justify-content: space-between
justify-center  // justify-content: center

h-full              // height: 100%
w-full              // width: 100%
min-h-screen        // min-height: 100vh
max-w-screen-2xl    // max-width: 1536px
w-64                // width: 16rem
w-[264px]           // arbitrary width: 264px
pl-[80px]           // arbitrary padding-left: 80px

p-4     // padding: 1rem
px-4    // padding-left & right: 1rem
py-8    // padding-top & bottom: 2rem
mx-auto // margin-left & right: auto (center)

fixed      // position: fixed
absolute   // position: absolute
relative   // position: relative
sticky     // position: sticky

top-0      // top: 0
left-0     // left: 0
right-0    // right: 0
bottom-0   // bottom: 0

z-40       // z-index: 40

bg-white           // background-color: white
bg-black           // background-color: black
bg-neutral-50      // light neutral background
bg-neutral-50/50   // same color with 50% opacity

// mobile-first approach
sm:     // ≥ 640px
md:     // ≥ 768px
lg:     // ≥ 1024px
xl:     // ≥ 1280px
2xl:    // ≥ 1536px

hidden lg:block    // hidden on mobile, block on large screens
lg:pl-[264px]      // apply padding-left only on lg+

transition-all     // transition all properties
transition-colors  // transition color properties only
duration-300       // 300ms duration
ease-in-out        // easing function

overflow-hidden    // hide overflow
overflow-y-auto    // vertical scroll if needed
overflow-scroll    // always scroll

grid               // display: grid
inline-grid        // display: inline-grid
grid-cols-1        // 1 column
grid-cols-2        // 2 columns
grid-cols-12       // 12 columns
col-span-6         // span 6 columns
gap-4              // gap: 1rem
gap-x-6            // horizontal gap
gap-y-8            // vertical gap

text-xs        // font-size: 0.75rem
text-sm        // 0.875rem
text-base      // 1rem
text-lg        // 1.125rem
text-xl        // 1.25rem
text-2xl       // 1.5rem

font-thin      // font-weight: 100
font-light     // 300
font-normal    // 400
font-medium    // 500
font-semibold  // 600
font-bold      // 700

text-center    // text-align: center
text-left      // text-align: left
text-right     // text-align: right

text-gray-500  // muted text
text-red-600   // red text

border             // 1px border
border-2           // 2px border
border-gray-200    // border color
border-t           // top border only
border-b           // bottom border only

rounded            // small radius
rounded-md         // medium radius
rounded-lg         // large radius
rounded-xl         // extra large
rounded-full       // fully rounded (circle)

shadow-sm      // small shadow
shadow         // default shadow
shadow-md      // medium
shadow-lg      // large
shadow-xl      // extra large
shadow-none    // remove shadow

block          // display: block
inline-block   // display: inline-block
inline         // display: inline
hidden         // display: none

visible        // visibility: visible
invisible      // visibility: hidden

w-1/2          // width: 50%
w-1/3          // 33.333%
w-2/3          // 66.666%
w-screen       // 100vw

h-64           // fixed height
h-screen       // 100vh
max-h-screen   // max-height: 100vh

cursor-pointer     // pointer cursor
cursor-not-allowed // disabled cursor
select-none        // disable text selection
pointer-events-none // disable mouse events

hover:bg-gray-100      // change bg on hover
hover:text-black       // change text on hover
focus:outline-none     // remove outline
focus:ring-2           // add focus ring
focus:ring-blue-500    // ring color
active:scale-95        // shrink on click

opacity-0      // fully transparent
opacity-50     // 50% opacity
opacity-75     // 75%
opacity-100    // fully visible

transform          // enable transform
scale-95           // scale to 95%
scale-100          // normal
rotate-45          // rotate 45deg
translate-x-2      // move right
-translate-y-1     // move up

z-0
z-10
z-20
z-30
z-40
z-50

backdrop-blur-sm       // small blur
backdrop-blur-md       // medium blur
backdrop-blur-lg       // large blur
bg-white/80            // translucent background

flex-wrap           // allow wrapping
flex-nowrap         // prevent wrapping
flex-wrap-reverse   // reverse wrapping

content-center      // align wrapped rows (multi-line)
content-between
content-around

self-auto           // individual align-self
self-start
self-center
self-end
self-stretch

order-1             // change order
order-2
order-last
order-first

auto-cols-auto      // implicit column sizing
auto-cols-fr
auto-rows-auto
auto-rows-fr

grid-rows-2        // 2 rows
row-span-2         // span 2 rows

place-items-center // align + justify center
place-content-between
place-self-center

aspect-square      // 1:1 ratio
aspect-video       // 16:9 ratio
aspect-[4/3]       // custom ratio

truncate           // single-line ellipsis
line-clamp-2       // clamp to 2 lines
line-clamp-3       // clamp to 3 lines

whitespace-nowrap
whitespace-pre
whitespace-normal

break-words
break-all

object-cover       // cover container
object-contain     // contain inside
object-fill
object-none
object-center

scroll-smooth      // smooth scroll
scroll-auto

snap-x             // horizontal scroll snap
snap-y
snap-center
snap-start

ring-1             // 1px ring
ring-2
ring-offset-2      // spacing between element & ring
ring-blue-500      // ring color

divide-y           // vertical separators
divide-x           // horizontal separators
divide-gray-200    // divider color

table-auto         // auto table layout
table-fixed        // fixed layout

border-collapse
border-separate

bg-gradient-to-r       // left → right
bg-gradient-to-l
bg-gradient-to-t
bg-gradient-to-b

from-blue-500
via-purple-500
to-pink-500

w-[300px]              // custom width
h-[calc(100vh-64px)]   // dynamic height
bg-[#1e293b]           // custom color
text-[18px]            // custom font size
rounded-[20px]         // custom radius

// Useful with Radix / Headless UI

data-[state=open]:bg-blue-500
aria-[expanded=true]:rotate-180

// Parent-based styling
group
group-hover:text-blue-500

// Sibling-based styling
peer
peer-checked:bg-blue-500
peer-focus:ring-2

animate-spin
animate-pulse
animate-bounce
animate-ping

// After adding in tailwind.config.js

animate-slide-in
animate-fade-in