TailwindCSS Preset

The @beeq/tailwindcss package is a TailwindCSS preset that wires BEEQ’s design token CSS variables into Tailwind’s theme. Installing it gives you:

BEEQ color palette (primitive + declarative semantic colors)
Design token–based spacing, border radius, box shadow, font size, font weight, and line height scales
CSS variables injected at :root for both the default BEEQ theme and the Endava theme
Automatic light/dark mode switching via bq-mode="light|dark" HTML attributes
A CSS reset and optional typography styles
ColorMix and LogicalProperties Tailwind plugins

Prerequisites

Make sure TailwindCSS is already installed and that its directives are present in your main CSS file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Installation

npm install -D @beeq/tailwindcss

Add the preset

JavaScript (CJS)
TypeScript (ESM)

tailwind.config.js

const beeqPreset = require('@beeq/tailwindcss');

module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  presets: [beeqPreset],
};

tailwind.config.ts

import { default as beeqPreset } from '@beeq/tailwindcss';
import type { Config } from 'tailwindcss';

export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  presets: [beeqPreset],
} satisfies Config;

CSS reset

The preset automatically injects a CSS reset into the @base layer. If you want to use your own reset, you can override it in the @base layer:

@tailwind base;
@layer base {
  /* Your custom reset styles */
}
@tailwind components;
@tailwind utilities;

Fonts

The preset does not load fonts automatically. Add the BEEQ fonts to your main CSS entry file:

/* BEEQ primary font — Outfit */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100;300;400;600;700&display=swap");

/* Endava brand font — Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');

The preset maps these fonts to Tailwind utilities:

Utility	CSS variable	Value
`font-default`	`--bq-font-family`	`'Outfit', sans-serif`
`font-outfit`	`--bq-font-family--outfit`	Outfit
`font-poppins`	`--bq-font-family--poppins`	Poppins

Typography plugin

The preset ships a set of default typography styles that map to BEEQ’s type scale. They are not enabled by default — add them via TailwindCSS’s plugin API:

JavaScript (CJS)
TypeScript (ESM)

tailwind.config.js

const plugin = require('tailwindcss/plugin');
const beeqPreset = require('@beeq/tailwindcss');
const { TYPOGRAPHY_DEFAULT } = require('@beeq/tailwindcss');

module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  presets: [beeqPreset],
  plugins: [
    plugin(function ({ addBase }) {
      addBase({ ...TYPOGRAPHY_DEFAULT });
    }),
  ],
};

tailwind.config.ts

import plugin from 'tailwindcss/plugin';
import { default as beeqPreset, TYPOGRAPHY_DEFAULT } from '@beeq/tailwindcss';
import type { Config } from 'tailwindcss';

export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  presets: [beeqPreset],
  plugins: [
    plugin(function ({ addBase }) {
      addBase({ ...TYPOGRAPHY_DEFAULT });
    }),
  ],
  corePlugins: {
    preflight: false,
  },
} satisfies Config;

The TYPOGRAPHY_DEFAULT map adds styles for .display, h1–h6, .caption, .overline, and semibold/bold modifiers:

/* Examples of what TYPOGRAPHY_DEFAULT adds */
.display  { font-size: var(--bq-font-size--xxl5); }   /* 64px */
h1, .h1   { font-size: var(--bq-font-size--xxl4); }   /* 56px */
h2, .h2   { font-size: var(--bq-font-size--xxl3); }   /* 48px */
h3, .h3   { font-size: var(--bq-font-size--xxl2); }   /* 40px */
h4, .h4   { font-size: var(--bq-font-size--xxl);  }   /* 32px */
h5, .h5   { font-size: var(--bq-font-size--xl);   }   /* 24px */
h6, .h6   { font-size: var(--bq-font-size--l);    }   /* 18px */
.caption  { font-size: var(--bq-font-size--s);    }   /* 14px */
.overline { font-size: var(--bq-font-size--xs);   }   /* 12px */

Design tokens exposed as Tailwind utilities

All tokens below are backed by CSS variables and respond to theme switches.

Spacing

Token	Variable	Value
`xs3`	`--bq-spacing-xs3`	2px
`xs2`	`--bq-spacing-xs2`	4px
`xs`	`--bq-spacing-xs`	8px
`s`	`--bq-spacing-s`	12px
`m`	`--bq-spacing-m`	16px
`l`	`--bq-spacing-l`	24px
`xl`	`--bq-spacing-xl`	32px
`xxl`	`--bq-spacing-xxl`	40px

Border radius

Token	Variable	Value
`none`	`--bq-radius--none`	0
`xs2`	`--bq-radius--xs2`	2px
`xs`	`--bq-radius--xs`	4px
`s`	`--bq-radius--s`	8px
`m`	`--bq-radius--m`	12px
`l`	`--bq-radius--l`	24px
`full`	`--bq-radius--full`	9999px

Box shadow

Token	Variable
`shadow-xs`	`--bq-box-shadow--xs`
`shadow-s`	`--bq-box-shadow--s`
`shadow-m`	`--bq-box-shadow--m`
`shadow-l`	`--bq-box-shadow--l`

Theme switching

The preset registers multiple theme configurations using CSS attribute selectors. Switch themes by setting bq-theme and bq-mode attributes on your root element:

<!-- Default BEEQ light theme (no attributes needed) -->
<html>

<!-- BEEQ dark mode -->
<html bq-mode="dark">

<!-- Endava light theme -->
<html bq-theme="endava">

<!-- Endava dark mode -->
<html bq-theme="endava" bq-mode="dark">

You can also use CSS class names:

<html class="dark">         <!-- BEEQ dark -->
<html class="endava">       <!-- Endava light -->
<html class="endava dark">  <!-- Endava dark -->

Introduction

Framework Integration

Theming

Prerequisites

Installation

Add the preset

CSS reset

Fonts

Typography plugin

Design tokens exposed as Tailwind utilities

Spacing

Border radius

Box shadow

Theme switching

Build docs developers (and LLMs) love

Introduction

Framework Integration

Theming

​Prerequisites

​Installation

​Add the preset

​CSS reset

​Fonts

​Typography plugin

​Design tokens exposed as Tailwind utilities

​Spacing

​Border radius

​Box shadow

​Theme switching

Build docs developers (and LLMs) love

Prerequisites

Installation

Add the preset

CSS reset

Fonts

Typography plugin

Design tokens exposed as Tailwind utilities

Spacing

Border radius

Box shadow

Theme switching