Tailwind is a front-end CSS framework that has taken off more than any other recently. Instead of creating a set of selectors and bespoke classes to style your code, you use a large set of single-purpose utility classes. In essence, you add nearly all your style right into your frontend HTML, React, or Vue code.

12m read timeFrom phpprotips.com
Post cover image
Table of contents
1. No more thinking of names for style classes2. Much less switching contexts between CSS files/style blocks and HTML code3. You can use variants with media queries, pseudo-classes, and child-selectors4. Tailwind helps enforce a coherent design system (without being too restrictive)5. Your production CSS only has styles you actually use6. Utility classes cache well7. It’s easy to make style changes without overriding things8. Extracting to components helps keep code DRY9. Tailwind styling is so much easier to maintain!1. A build step is required2. Setup and learning curve3. Larger HTML sizes4. Tailwind can’t do everything5. It could stop you from learning CSS properly6. It reduces the separation of concerns between content and styleConclusion
9 Comments

Sort: