tailwind-css

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without writing CSS. It offers responsive design, dark mode, customization through configuration, and integrates seamlessly with modern frameworks. Best for: Consider alternatives when: tailwind.config.js: styles/globals.css: Tailwind provides single-purpose utility classes that map directly to CSS properties. Flexbox: Grid: Padding and Margin: Space Between: Tailwind uses mobile-first breakpoint system. tailwind.config.js: tailwind.config.js: Implementation: tailwind.config.js: tailwind.config.js: Just-In-Time compilation generates styles on-demand: Installation: next.config.js: _app.tsx: Component Example: Installation: svelte.config.js: Component Example: Installation: main.ts: Component Example: Check content paths in config: Verify CSS imports: Rebuild for dynamic classes: - Rapid prototyping with consistent design systems - Component-based frameworks (React, Vue, Svelte) - Projects requiring responsive and dark mode support - Teams wanting to avoid CSS file maintenance - Design systems with standardized spacing/colors - Team unfamiliar with utility-first approach (learning curve) - Project requires extensive custom CSS animations - Legacy browser support needed (IE11) - Minimal CSS footprint required without build process - Check content paths in config: content...