Tailwind CSS is an

open-source Open source is source code that is made freely available for possible modification and redistribution. Products include permission to use and view the source code, design documents, or content of the product. The open source model is a decentrali ...

CSS framework A CSS framework is a library allowing for easier, more standards-compliant web design using the Cascading Style Sheets language. Most of these frameworks contain at least a grid (graphic design), grid. More functional frameworks also come with mor ...

. Unlike other frameworks, like Bootstrap, it does not provide a series of predefined classes for elements 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. For example, in other traditional systems, there would be a class 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: and . As of 5 August 2024, Tailwind CSS has over 81,000 stars on

GitHub GitHub () is a Proprietary software, proprietary developer platform that allows developers to create, store, manage, and share their code. It uses Git to provide distributed version control and GitHub itself provides access control, bug trackin ...

Features

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.

Utility classes

The ''utility-first'' concept refers to the main differentiating feature of Tailwind. 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 called utility classes. There are many utility classes in Tailwind CSS that enable to control a large number of CSS properties like colors, border, display type (''display''), font size and font, layout, shadow...

Variants

Tailwind offers the possibility to apply a utility class only in some situations through ''

media queries Media queries is a feature of CSS 3 allowing content rendering to adapt to different conditions such as screen resolution (e.g. mobile and desktop screen size). It became a W3C recommended standard in June 2012,W3C – CSS specs > Media QueriesCo ...

'', which is called a variant. The main use of variants is to design a responsive interface for various screen sizes. There are also variants for the different states an element can have, such as for when hovered, when keyboard selected or when in use, or when the browser or operating system has

dark mode A light-on-dark color scheme, better known as dark mode, dark theme or night mode, is a color scheme that uses light-colored text, icons, and graphical user interface elements on a dark background. It is often discussed in terms of computer ...

enabled. Variants have two parts: the condition to be met and the class that is applied if the condition is met. For example, the variant will apply the class if the screen size is at least the value defined for . Tailwind CSS is developed using

JavaScript JavaScript (), often abbreviated as JS, is a programming language and core technology of the World Wide Web, alongside HTML and CSS. Ninety-nine percent of websites use JavaScript on the client side for webpage behavior. Web browsers have ...

, runs via Node.js, and installs with environment package managers like npm or

yarn Yarn is a long continuous length of interlocked fibres, used in sewing, crocheting, knitting, weaving, embroidery, ropemaking, and the production of textiles. '' Thread'' is a type of yarn intended for sewing by hand or machine. Modern ...

Settings and themes

It is possible to configure the utility classes and variants that Tailwind offers through a configuration file usually named . In the configuration, one can set the values of the utility classes, such as the color-palette or the sizes between elements for margins.

Build all and purge

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 as PurgeCSS, 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.

Just-in-time mode

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.

Versions

Tailwind CSS uses

semantic versioning Software versioning is the process of assigning either unique ''version names'' or unique ''version numbers'' to unique states of computer software. Within a given version number category (e.g., major or minor), these numbers are generally assig ...

to identify its version compatibility.

References

{{Reflist, 2

External links

Official Tailwind Documentation

Tailwind Play

Github Repo

Tailwind Converter
CSS frameworks Cascading Style Sheets Software using the MIT license Responsive web design