Tailwind CSS

Tailwind CSS is a utility-first CSS framework. Instead of writing custom CSS for each component, developers apply small single-purpose classes, such as flex, pt-4 or text-center, directly in the markup. Combined, these classes build any design without leaving the HTML or component file.

Tailwind scans the project's files and generates only the CSS classes that are actually used, which keeps the final stylesheet small. Design tokens such as colors, spacing, fonts and breakpoints are defined in one place, so the whole site follows the same system.

Why teams use Tailwind

• Consistent spacing, colors and type from one design system
• Responsive design with breakpoint prefixes in the markup
• Dark mode and state styles such as hover and focus
• Small production stylesheets
• No naming of custom CSS classes for every element

Tailwind in component-based sites

Tailwind works especially well with component frameworks such as React and Next.js. Each component carries its own styles in its markup, so changing a button or card does not affect unrelated parts of the site. Filament also uses Tailwind as its design system for admin panels and portals.

Accessibility and design quality

Tailwind controls how things look, not whether they are usable. Color contrast, visible focus states, readable font sizes and semantic HTML still need to be checked against WCAG 2.1 AA. A design system built on Tailwind can bake in accessible colors and focus styles so every component starts from a good baseline.

Tailwind fits custom sites and applications built by developers. Sites edited mainly in a visual builder such as Elementor use that builder's own styling tools instead.