Styling with utility classes

You style elements in Tailwind by combining many single-purpose utility classes directly in your markup — for example flex, p-6, max-w-sm, mx-auto, bg-white, rounded-xl, shadow-lg, size-12, gap-x-4, and text-xl. The documented benefits: designs come together faster because you never name classes or switch between HTML and CSS files; changes feel safer because adding or removing a class only ever affects that element; old projects are easier to maintain; code is portable because structure and styling live in the same place; and your CSS stops growing because utilities are so reusable. Unlike inline styles, utilities come from a predefined design system and can target states like hover or focus and media queries. Prefix any utility with a variant like hover:bg-sky-700 to apply styles only when the condition matches, and stack variants, as in disabled:hover:bg-sky-500. Scope: Tailwind CSS v4. Reviewed October 4, 2026.