The use of Tailwind CSS

Tailwind CSS is a utility-first CSS framework for rapidly building custom designs. It was developed by Adam Wathan and initially released in November 2017. Tailwind CSS provides low-level utility classes that let you build completely custom designs without leaving your HTML.

The utility-first approach encourages you to compose your UI by applying utility classes directly to HTML elements. By doing so, it becomes easier to create responsive, maintainable, and scalable code.

Tailwind CSS has encouraged the use of classes directly within HTML, and has further emphasised that "actual HTML code is always divided into components".

Building a design system requires the creation of components with a set of fixed style to maintain consistency. The UAE design system wanted to provide these consistent components, with the ability for designers and developers to add utility classes to their layouts and custom designs when required.

Why Tailwind CSS?

Tailwind is highly configurable, letting you define your design system's values for spacing, color, typography, and more in its configuration file, making it a good match for a robust design system.

Utilizing Tailwind CSS as the base for the UAE design system version 2.0 is an excellent choice for several reasons:

Speed & Efficiency: Tailwind CSS allows for rapid development and prototyping, enabling designers and developers to implement designs much faster than writing custom CSS.
Utility-First: Tailwind's utility-first architecture encourages the use of small, reusable utility classes, aligning well with the philosophy of a design system that aims for reusability and consistency.
Customizability: Tailwind CSS is highly configurable, making it easier to adapt the framework to fit specific design requirements, such as custom colors, breakpoints, and typography settings, aligning them with your design system's guidelines.
Community and Ecosystem: Tailwind has a large community and ecosystem, providing various plugins and extensions that could be beneficial when building complex UI components.
Accessibility: Tailwind provides features aimed at producing accessible markup, which aligns with your focus on accessibility guidelines.

Core concepts

How to apply Hover, Focus, and Other States?

Every utility class in Tailwind can be applied conditionally by adding a modifier to the beginning of the class name that describes the condition you want to target.

Applying responsive design

Every utility class in Tailwind can be applied conditionally at different breakpoints, which makes it a piece of cake to build complex responsive interfaces without ever leaving your HTML.

Functions & Directives

A reference for the custom functions and directives Tailwind exposes to your CSS.

It is recommended to further explore the Tailwind CSS documentation to learn about all other core concepts and all the CSS properties available through Tailwind. If you are new to Tailwind, we recommend starting by visiting their documentation section.

Find out more