 | This articlerelies excessively onreferences toprimary sources. Please improve this article by addingsecondary or tertiary sources. Find sources: "Tailwind CSS" – news ·newspapers ·books ·scholar ·JSTOR(February 2025) (Learn how and when to remove this message) |
 | |
| Original author(s) | Adam Wathan, Jonathan Reinink, David Hemphill, and Steve Schoger |
|---|---|
| Developer(s) | Tailwind Labs[1] |
| Initial release | 13 May 2019; 5 years ago (2019-05-13)[2] |
| Stable release | 4.0.9[3]  / 25 February 2025 |
| Repository | |
| Written in | TypeScript,Rust,CSS |
| Platform | Web |
| Available in | English |
| License | MIT License[4] |
| Website | tailwindcss.com |
Tailwind CSS is anopen-sourceCSS framework. Unlike other frameworks, likeBootstrap, it does not provide a series of predefined classes forelements such as buttons or tables. Instead, it creates a list of "utility" CSS classes that can be used to style each element by mixing and matching.[5][6](change the version to 4.0.16)
For example, in other traditional systems, there would be a classmessage-warning that would apply a yellow background color and bold text. To achieve this result in Tailwind, one would have to apply a set of classes created by the library:bg-yellow-300 andfont-bold.
As of 5 August 2024, Tailwind CSS has over 81,000 stars onGitHub.[7]
Due to the difference in basic concepts in relation to other traditional CSS frameworks such as Bootstrap, it is important to know the philosophy from which Tailwind was created, as well as its basic usage.
Theutility-first concept refers to the main differentiating feature of Tailwind.[8] Instead of creating classes around components (button, panel, menu, textbox ...), classes are built around a specific style element (yellow color, bold font, very large text, center element...). Each of these classes is calledutility classes.
There are many utility classes in Tailwind CSS that enable to control a large number ofCSS properties like colors, border, display type (display), font size and font, layout, shadow...
| Result |  | |
|---|---|---|
| Code | <divclass="m-4 p-4 bg-yellow-200 font-bold rounded-lg"><p>Please be careful when feeding the birds.</p></div> | |
| Classes | Tailwind | CSS equivalent |
m-4 | margin:1rem; | |
p-4 | padding:1rem; | |
bg-yellow-200 | background-color:rgb(254240138); | |
font-bold | font-weight:700; | |
rounded-lg | border-radius:0.5rem; | |
Tailwind offers the possibility to apply a utility class only in some situations throughmedia queries, which is called a variant. The main use of variants is to design aresponsive interface for various screen sizes.[9] There are also variants for the different states an element can have, such ashover: for when hovered,focus: when keyboard selected oractive: when in use,[10] or when the browser or operating system hasdark mode enabled.[11]
Variants have two parts: the condition to be met and the class that is applied if the condition is met. For example, the variantmd:bg-yellow-400 will apply the classbg-yellow-400 if the screen size is at least the value defined formd.
Tailwind CSS is developed usingJavaScript, runs viaNode.js, and installs with environment package managers likenpm oryarn.[12]
It is possible to configure the utility classes and variants that Tailwind offers through a configuration file usually namedtailwind.config.js. In the configuration, one can set the values of the utility classes, such as the color-palette or the sizes between elements for margins.
The default mode of Tailwind is that the system generates all possible CSS combinations based on the project settings. Then, by means of another utility such asPurgeCSS, all the files are traversed, and the classes that are not being used are removed from the resulting CSS file.
Due to the number of classes that can be generated by the number of variants and their combinations, this method has the drawbacks of long waiting times and large sizes of CSS files before being purged. This mode of operation is no longer available in version 3 of Tailwind CSS.[13]
JIT mode (Just-In-Time) is an alternative way to generate the CSS that, instead of generating all possible classes and then removing all those that are not being used, parses the content of HTML files (or configured extensions or locations) and instantly generates only those classes that are needed and used.
By generating only the necessary CSS, JIT reduces the size of the CSS file. This technical improvement has made it possible to introduce numerous new variants and utility classes, as well as the ability to create utility classes on the fly with arbitrary values not set in the configuration.
Starting with version 3 of Tailwind CSS, JIT mode has become the default.[13]
Tailwind CSS usessemantic versioning to identify its version compatibility.
