Helpful tip: before using any libraries below, you should check your IDE for plugins that might improve the developer experience of using it. For example, if you use Tailwind, the Tailwind IntelliSense plugin (which recommends classnames in the auto-complete dropdown) and Prettier coupled with the Tailwind Prettier Plugin (enforces consistent ordering of classnames in your markup) in Visual Studio Code might be useful for your team.
Utility Approach
- Tailwind CSS - most popular utility-first choice, huge ecosystem.
- UnoCSS - highly customizable atomic engine with strong DX.
- Panda CSS - design-token-first approach with typed recipes.
- Use the inline fold vscode plugin to collapse long className strings when you're not focused on them with the cursor - Inspired by Cory House
- The Tailwind IntelliSense vscode plugin gives you auto-complete
- If you purchase tailwindui you'll get access to tons of pre-made components + templates
- shadcn/ui - Open Source UI Components
- Preline - Open Source UI Components
- awesome-tailwindcss repository on github.com is full of awesome stuff
CSS / CSS-in-JS
- CSS Modules - still one of the cleanest defaults for component-scoped CSS.
- vanilla-extract - static extraction + type-safe tokens.
- Emotion - flexible CSS-in-JS when you need runtime styling.
- styled-components - mature API and large ecosystem.
Modern Styling Tips (2026)
- Prefer design tokens (colors/spacing/radius/typography) in one source of truth.
- Avoid ad-hoc colors in components; map UI to semantic tokens (
surface,text-muted,danger). - Use CSS variables for theme switching (light/dark/brand) instead of duplicating style objects.
- Use container queries and modern CSS (
@container,:has) where it reduces JS-driven layout logic. - Keep animation lightweight; default to transform/opacity transitions for better performance.
- Validate contrast and focus states early; accessibility fixes become expensive late in development.
Component Libraries
Most UI libraries will come with a "theme" or global way to configure certain things like colors, fonts, etc. — but in general, the components render with opinionated styles already applied.
If your app is small enough, it may be simpler to reach for a headless solution (more below) and create the critical components in your app than try to overwrite or customize an entire library.
If you need a lot of customization or control over the presentation of the UI, you should consider a headless solution.
Headless Component Libraries
Recommended Combinations
- Radix UI + tailwind
- Headless UI + tailwind
- Chakra UI + emotion
- Base UI + CSS Modules / styled-components
- shadcn/ui + tailwind + Radix primitives