Tailwind CSS

Last updated

Tailwind CSS
Original author(s) Adam Wathan, Jonathan Reinink, David Hemphill, and Steve Schoger
Developer(s) Tailwind Labs [1]
Initial release13 May 2019;5 years ago (2019-05-13) [2]
Stable release
3.4.13 [3]   OOjs UI icon edit-ltr-progressive.svg / 23 September 2024
Repository
Written in TypeScript, Rust, CSS
Platform Web
Available inEnglish
License MIT License [4]
Website tailwindcss.com

Tailwind CSS is an open-source CSS framework. 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. [5] [6]

Contents

For example, in other traditional systems, there would be a class message-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 and font-bold.

As of 5 August 2024, Tailwind CSS has over 81,000 stars on GitHub. [7]

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. [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 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...

Example: yellow notice
Result Example Tailwind yellow warning.png
Code
<divclass="m-4 p-4 bg-yellow-200 font-bold rounded-lg"><p>Please be careful when feeding the birds.</p></div>
ClassesTailwindCSS equivalent
m-4margin:1rem;
p-4padding:1rem;
bg-yellow-200background-color:rgba(254,240,138,1);
font-boldfont-weight:700;
rounded-lgborder-radius:0.5rem;

Variants

Tailwind offers the possibility to apply a utility class only in some situations through media queries , which is called a variant. The main use of variants is to design a responsive interface for various screen sizes. [9] There are also variants for the different states an element can have, such as hover: for when hovered, focus: when keyboard selected or active: when in use, [10] or when the browser or operating system has dark 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 variant md:bg-yellow-400 will apply the class bg-yellow-400 if the screen size is at least the value defined for md.

Tailwind CSS is developed using JavaScript, runs via Node.js, and installs with environment package managers like npm or yarn. [12]

Settings and themes

It is possible to configure the utility classes and variants that Tailwind offers through a configuration file usually named tailwind.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.

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. [13]

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.

Because all possible variables are no longer generated, the waiting time and size of the resulting CSS files is greatly reduced.[ citation needed ] 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]

Versions

Tailwind CSS uses semantic versioning to identify its version compatibility.

See also

Related Research Articles

<span class="mw-page-title-main">Java virtual machine</span> Virtual machine that runs Java programs

A Java virtual machine (JVM) is a virtual machine that enables a computer to run Java programs as well as programs written in other languages that are also compiled to Java bytecode. The JVM is detailed by a specification that formally describes what is required in a JVM implementation. Having a specification ensures interoperability of Java programs across different implementations so that program authors using the Java Development Kit (JDK) need not worry about idiosyncrasies of the underlying hardware platform.

Windows Presentation Foundation (WPF) is a free and open-source user interface framework for Windows-based desktop applications. WPF applications are based in .NET, and are primarily developed using C# and XAML.

<span class="mw-page-title-main">Google Web Toolkit</span> Free Java library

Google Web Toolkit, or GWT Web Toolkit, is an open-source set of tools that allows web developers to create and maintain JavaScript front-end applications in Java. It is licensed under Apache License 2.0.

<span class="mw-page-title-main">YUI Library</span>

The Yahoo! User Interface Library (YUI) is a discontinued open-source JavaScript library for building richly interactive web applications using techniques such as Ajax, DHTML, and DOM scripting. YUI includes several cores CSS resources. It is available under a BSD License. Development on YUI began in 2005 and Yahoo! properties such as My Yahoo! and the Yahoo! front page began using YUI in the summer of that year. YUI was released for public use in February 2006. It was actively developed by a core team of Yahoo! engineers.

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animations, and Ajax. It is free, open-source software using the permissive MIT License. As of August 2022, jQuery is used by 77% of the 10 million most popular websites. Web analysis indicates that it is the most widely deployed JavaScript library by a large margin, having at least three to four times more usage than any other JavaScript library.

Eclipse OpenJ9 is a high performance, scalable, Java virtual machine (JVM) implementation that is fully compliant with the Java Virtual Machine Specification.

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. More functional frameworks also come with more features and additional JavaScript based functions, but are mostly design oriented and focused around interactive UI patterns. This detail differentiates CSS frameworks from other JavaScript frameworks.

<span class="mw-page-title-main">CSS</span> Style sheet language

Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

<span class="mw-page-title-main">Less (style sheet language)</span> Dynamic stylesheet language

Less is a dynamic preprocessor style sheet language that can be compiled into Cascading Style Sheets (CSS) and run on the client side or server side. Designed by Alexis Sellier, Less is influenced by Sass and has influenced the newer "SCSS" syntax of Sass, which adapted its CSS-like block formatting syntax. Less is an open source project. Its first version was written in Ruby; however, in the later versions, use of Ruby has been deprecated and replaced by JavaScript. The indented syntax of Less is a nested metalanguage, as valid CSS is valid Less code with the same semantics. Less provides the following mechanisms: variables, nesting, mixins, operators and functions; the main difference between Less and other CSS precompilers is that Less allows real-time compilation via less.js by the browser.

Dart is a programming language designed by Lars Bak and Kasper Lund and developed by Google. It can be used to develop web and mobile apps as well as server and desktop applications.

<span class="mw-page-title-main">Bootstrap (front-end framework)</span> Web design front-end

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

<span class="mw-page-title-main">Brackets (text editor)</span> Editor for web development

Brackets is a source code editor with a primary focus on web development. Created by Adobe Inc., it is free and open-source software licensed under the MIT License, and is currently maintained on GitHub by open-source developers. It is written in JavaScript, HTML and CSS. Brackets is cross-platform, available for macOS, Windows, and most Linux distributions. The main purpose of Brackets is its live HTML, CSS and JavaScript editing functionality.

Yeoman is an open source client-side scaffolding tool for web applications. Yeoman runs as a command-line interface written for Node.js and combines several functions into one place, such as generating a starter template, managing dependencies, running unit tests, providing a local development server, and optimizing production code for deployment.

<span class="mw-page-title-main">GraalVM</span> Virtual machine software

GraalVM is a Java Development Kit (JDK) written in Java. The open-source distribution of GraalVM is based on OpenJDK, and the enterprise distribution is based on Oracle JDK. As well as just-in-time (JIT) compilation, GraalVM can compile a Java application ahead of time. This allows for faster initialization, greater runtime performance, and decreased resource consumption, but the resulting executable can only run on the platform it was compiled for.

Velocity is a cross-platform JavaScript library designed to simplify the client-side scripting of website animation. Velocity is free, open-source software licensed under the MIT License. It is the most popular open source web animation engine.

<span class="mw-page-title-main">Polymer (library)</span> Open-source JavaScript library of Web Components

Polymer is an open-source JavaScript library for building web applications using Web Components. The library is being developed by Google developers and contributors on GitHub. Modern design principles are implemented as a separate project using Google's Material Design design principles.

<span class="mw-page-title-main">Vue.js</span> Open-source JavaScript library for building user interfaces

Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You and is maintained by him and the rest of the active core team members.

<span class="mw-page-title-main">PostCSS</span> Software development tool that uses JavaScript-based plugins to automate routine CSS operations

PostCSS is a software development tool that uses JavaScript-based plugins to automate routine CSS operations. It was designed by Andrey Sitnik with the idea taking its origin in his front-end work for Evil Martians.

CSS-in-JS is a styling technique by which JavaScript is used to style components. When this JavaScript is parsed, CSS is generated and attached into the DOM. It enables the abstraction of CSS to the component level itself, using JavaScript to describe styles in a declarative and maintainable way. There are multiple implementations of this concept in the form of libraries such as

<span class="mw-page-title-main">Bootstrap Studio</span> Proprietary web design and development application

Bootstrap Studio is a proprietary web design and development application. It offers a large number of components for building responsive pages including headers, footers, galleries and slideshows along with basic elements, such as spans and divs.

References

  1. ↑ "Tailwind Labs". GitHub .
  2. ↑ Doe. "Release Notes: Tailwind CSS v1.0". Tailwind CSS. Retrieved 17 August 2024.
  3. ↑ "Release 3.4.13". 23 September 2024. Retrieved 26 September 2024.
  4. ↑ "Github: tailwindlabs/tailwindcss, LICENSE". GitHub .
  5. ↑ Gerchev, Ivaylo (2022). Tailwind CSS. Sebastopol: O'Reilly Media. ISBN   978-1-0981-4099-1. OCLC   1314257318.
  6. ↑ Rappin, Noel (2021). Modern CSS with Tailwind flexible styling without the fuss. Raleigh: The Pragmatic Bookshelf. ISBN   978-1-68050-857-4. OCLC   1277046918.
  7. ↑ tailwindlabs/tailwindcss, Tailwind Labs, 17 April 2024, retrieved 17 April 2024
  8. ↑ "Utility-First - Tailwind CSS". tailwindcss.com. Retrieved 13 November 2021.
  9. ↑ "Responsive Design - Tailwind CSS". tailwindcss.com. Retrieved 13 November 2021.
  10. ↑ "Hover, Focus, & Other States - Tailwind CSS". tailwindcss.com. Retrieved 13 November 2021.
  11. ↑ "Dark Mode - Tailwind CSS". tailwindcss.com. Retrieved 13 November 2021.
  12. ↑ "Installation - Tailwind CSS". tailwindcss.com. Retrieved 13 November 2021.
  13. 1 2 "Release v3.0.0-alpha.1 tailwindlabs/tailwindcss". GitHub. Retrieved 13 November 2021.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.