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.

Tailwind CSS v4 and the UAE Design System

In December 2024, Tailwind CSS v4.0 was released with a ground-up rewrite of the framework, offering significant performance improvements and a modernized architecture. The UAE Design System plugin has been updated to work seamlessly with v4. Key changes include:

• New High-Performance Engine: Full rebuilds are over 3.5x faster, and incremental builds are over 8x faster than v3.
• CSS-First Configuration: Configuration is now done directly in CSS using the @theme directive instead of a JavaScript tailwind.config.js file.
• Simplified Installation: Uses a single @import "tailwindcss" statement instead of multiple @tailwind directives.
• Automatic Content Detection: No need to configure the content array—Tailwind automatically detects your template files.
• Modern CSS Features: Leverages native cascade layers, registered custom properties, color-mix(), and logical properties.
• First-Party Vite Plugin: Dedicated @tailwindcss/vite plugin for improved performance in Vite projects.

Getting Started with Tailwind v4

The UAE Design System plugin is built to work with Tailwind CSS v4, leveraging its improved performance and modern features. The new version introduces several changes to how you configure and use Tailwind in your projects.

Here are the key differences from the previous version:

Key Differences Between v3 and v4

• Installation: v3 uses npm install -D tailwindcss and npx tailwindcss init. v4 uses npm install tailwindcss @tailwindcss/postcss or the Vite plugin.
• CSS Directives: v3 uses @tailwind base; @tailwind components; @tailwind utilities; while v4 uses a single @import "tailwindcss"; statement.
• Configuration: v3 uses tailwind.config.js file with JavaScript. v4 uses CSS-based configuration with the @theme directive directly in your stylesheet.
• Plugins: v3 requires plugins in the config file. v4 uses @plugin directives in CSS.
• Content Detection: v3 requires explicit content array configuration. v4 automatically detects your template files.

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

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.