Tailwind
Rapidly build modern websites without ever leaving your HTML. A utility-first CSS framework packed with classes like flex, pt-4, text-center, and rotate-90 that can be composed to build any design directly in your markup. Tailwind CSS
What working with Tailwind CSS every day for two years looks like — Mosaad
- As of now, with Tailwind CSS v3.2.4 and the ecosystem around it, I consider Tailwind CSS to be one of the boring established CSS solutions that enables me to be the most productive in building and maintaining projects of various sizes
- Shopify Analyzes CSS Frameworks
Don't use Tailwind for your Design System
- It's error-prone to remove one of the
classNames
from the list; it is a similar situation when you want to remove a new CSS class in an append only stylesheet. They can collide and override other properties - When reading JSX, I am comfortable imagining a 1-to-1 match with the UI. I can easily navigate through the component tree and map with the reality
- Fail at dynamic styling
- For example, having a
<Link />
component withcolor="text-mono-100"
. In the beginning, it would make sense sincetext-mono-100
represents the desired color. Maybe later, a need to style the link with a different color on hover. You would add another prop calledhoverColor="text-mono-200"
and call it a day.
- For example, having a
- Document-like websites, styling content that is structured as a big chunk. Using Tailwind Typography, it does come with reasonable defaults for raw content like a blog or a newsletter