Frequently Asked Questions

• What is Tailwind CSS?

  Tailwind CSS is a different way of writing CSS. It provides small pieces of CSS, called utilities, which represent a single line of CSS.

  It encourages colocation (keeping markdown and styles in the same place) for easier maintenance. This means you don't need to worry about naming your classes or styles affecting unwanted elements.

  Read More: Utility-first Fundamentals

• Isn't that just inline styles?

  Although similar, Tailwind CSS and inline styling have key differences. For example, it is impossible to use media queries and state selectors inline.

  In Tailwind CSS this is trivial with lg: (for when screens are bigger than a certain width) and hover: (to change styles when the user hovers their mouse over something).

  Read More: Utility classes vs inline styles

• Why not use Bootstrap then?

  Bootstrap is a component library: it decides how a button looks and customization is secondary.

  TailwindCSS isn't, since it provides small pieces of CSS, called utilities, so you can style a button from scratch — and make it look however you please.

  Watch this: Comparing Modern CSS Solutions

• Doesn't the HTML get ugly?

  Yes, it kinda does!

  This is a trade-off that Tailwind CSS embraces: it sacrifices pretty HTML for styling consistency and ease of maintenance that comes with colocation — having markdown and styles at the same place.

  Read More: CSS and "Separation of Concerns"