Guides
Practical guides for converting CSS concepts into Tailwind utilities.
- CSS vs Tailwind — Classic CSS excels at complex selectors and animations. Tailwind excels at colocating visual decisions with markup. Most teams use both.
- CSS Spacing to Tailwind — padding: 1.5rem becomes p-6. Shorthands expand to side utilities. Off-scale lengths become p-[13px].
- CSS Typography to Tailwind — font-size: 1.5rem maps to text-2xl. font-weight: 700 maps to font-bold. Colors use text-* utilities.
- CSS Flexbox to Tailwind — display:flex → flex. flex-direction:column → flex-col. justify-content:space-between → justify-between. gap:1rem → gap-4.
- CSS Grid to Tailwind — grid-template-columns: repeat(3, 1fr) becomes grid-cols-3. Custom tracks use arbitrary grid-cols values.
- CSS Colors to Tailwind — Known palette hex values map to tokens like text-gray-900. Unknown colors become bg-[#1a2b3c].
- CSS Borders to Tailwind — border: 1px solid becomes border plus border-color utilities. border-radius: 0.5rem maps to rounded-lg.
- Responsive CSS to Tailwind — @media (min-width: 768px) aligns with md:. 1024px with lg:. Complex queries need manual review.
- CSS Shadows to Tailwind — Common elevations map to shadow / shadow-lg. Unique shadows become arbitrary shadow utilities.
- CSS Positioning to Tailwind — position:absolute → absolute. Inset sides map to top/right/bottom/left utilities. Custom z-index uses arbitrary values.
- CSS Migration Strategies — Prefer incremental migration: new components in Tailwind, convert hot paths next, keep legacy CSS until replaced.