freeCodeCamp/guide/english/tailwindcss/index.md

2.0 KiB

title
Tailwind CSS

Tailwind CSS

Tailwind CSS is a CSS framework following the "utility-first CSS" approach, a term coined by Adam Wathan, who is one of the creators along with Jonathan Reinink, David Hemphill and Steve Schoger. Tailwind CSS is different from frontend libraries like Bootstrap in the way that it does not provide a set of ready-to-use components. It rather comes with a curated but configurable set of CSS classes. This approach was first described by Thierry Koblentz and got known as "Atomic CSS", not to be confused with the "Atomic design" methodology. Over the years the method of injecting CSS classes that are mostly applying only one single rule became more and more popular and was thoroughly defended against criticism. While other frameworks use CSS utility classes as an addition, e.g. like introduced in Bootstrap 4, Tailwind CSS allows to create complex user interfaces merely using this technique. The classes used in Tailwind CSS can be generated dynamically using a JavaScript configuration file which allows to adapt, add or remove classes. This includes adapting variables like color palettes or breakpoints used to generate the corresponding CSS classes. Tailwind CSS is best suited for individually designed interfaces because it lacks components or a theme but instead gives the freedom to create a highly customized look without the need to override default styling. Nevertheless custom components can easily be created by applying the existing utility classes and to build common frontend components like media cards.