Installation

The United Arab Design System 3.0 is a framework and a carefully crafted, tested and validated set of components, blocks and patterns that can help you design and build websites for the United Arab Emirates Federal Government.

The design system is built with TailwindCSS, and it is a plugin that can be added to your TailwindCSS project.

This installation guide will help you get started with spinning up a new project using the DLS 3.0 plugin. You may choose to compile your coding using any preprocessor or using the TailwindCSS CLI. For more information on how to use pre-processors and TailwindCSS CLI, you can visit the installation page on TailwindCSS.com

HTML
React

1
Install the package
Install the ` AEGov-Design-System ` package via NPM. TailwindCSS will be installed as a dependency. This includes the typography and forms plugin for TailwindCSS.
npm i @aegov/design-system
2
Set up your CSS file
Create a CSS file (e.g., /src/style.css) and import Tailwind CSS along with the UAE Design System plugin.

The @layer base; directive ensures proper cascade layer ordering.

You can customize your design tokens (colors, fonts, spacing, etc.) using the @theme directive directly in your CSS file.
/* create a new css file, example /src/style.css */ @layer base; @import "tailwindcss"; @plugin "@tailwindcss/forms"; @plugin "@tailwindcss/typography"; @plugin "@aegov/design-system"; /* Customize your theme (optional) */ /* @theme { --color-primary: #0066cc; --spacing-custom: 2.5rem; --radius-lg: 1rem; } */

Important Note

The @import "tailwindcss" statement replaces the old @tailwind directives. The @plugin directives replace the plugins array from the config file.
3
Compile your CSS file
Use a build system, or directly use the built in tailwindcss tool to build your CSS file.
npx @tailwindcss/cli -i ./src/style.css -o ./dist/style.css --watch

Other Build Tools

The CLI method shown above works universally. If you're using Vite, PostCSS, or other build tools, you can integrate the UAE Design System plugin following the same CSS setup from Step 2. See the official Tailwind CSS documentation for framework-specific installation guides.

Tailwind CSS automatically detects content in your project files and generates only the CSS classes you use.

Use the compiled CSS in your HTML

Add the compiled CSS to your HTML files in the <head> section and start adding components and blocks.

Use Tailwind CSS utility classes and UAE Design System components within your HTML to build your website, or add your own custom CSS to the style.css file.

<!-- an example of an HTML file - such as /src/index.html -->
  
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/dist/style.css" rel="stylesheet">
  </head>
  <body dir="ltr">  
    <div class="container">    
      <h1>Hello world!</h1>    
      <div>    
        <button class="aegov-btn">Show me more</button>    
      </div>  
    </div>
  </body>
</html>

1
Install the package
Install the @aegov/design-system-react package via NPM. All dependencies including Tailwind typography and forms plugin will be installed.
npm install @aegov/design-system-react
Note: Make sure your project is using Tailwind CSS v3.4.
2
Configure Tailwind
Update your tailwind.config.js file to include the Design System React package path in the content array.
content: [ './node_modules/@aegov/design-system-react/**/*.{js,jsx,ts,tsx}', './src/**/*.{js,jsx,ts,tsx}', ],
3
Import Design System styles
Import the Design System's Tailwind styles in your index.css (or main CSS entry file).
@import '../node_modules/@aegov/design-system-react/dist/styles/tailwind.css';

Getting started

The use of TailwindCSS

Installation

Install the package

Set up your CSS file

Compile your CSS file

Use the compiled CSS in your HTML

Install the package

Configure Tailwind

Import Design System styles

Sustainable by design