@digigov/css

@digigov/css

CSS component library for the Digigov design system. Ships pre-built CSS files that include base styles, component classes (.ds-*), and layout utilities — all built on Tailwind CSS and themed via CSS custom properties.

Installation

npm install @digigov/css

Usage

Without Tailwind CSS

Import the pre-built CSS bundle. No build tooling required — all Tailwind directives are already compiled.

import '@digigov/css'; // this includes theme-default & theme-govgr

Or pick a variant:

Import	Contents
"@digigov/css/dist/digigov-plain.css"	theme-default + base + components + utilities
"@digigov/css/dist/digigov-base.css"	base + components + utilities (no theme)

With Tailwind CSS

If your app uses Tailwind and you want to write utility classes like bg-primary, text-error/50, or md:flex using the design system tokens, use the exported Tailwind config as a preset:

// tailwind.config.js
module.exports = {
  presets: [require('@digigov/css/tailwind.config.js')],
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
};

Then import the dist CSS alongside your own Tailwind entry:

import '@digigov/css'; // design system components + theme
import './main.css'; // your Tailwind entry point

/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

The preset gives your Tailwind build access to all design system colors, breakpoints, fonts, and extended theme values. Your utility classes will resolve to the same CSS custom properties that the design system components use.

Dist contents

The pre-built CSS includes:

• Base styles — Global defaults (body, html) using design system tokens
• Components — All .ds-* component classes (buttons, forms, cards, accordions, navigation, etc.)
• Utilities — Layout helpers (.ds-grid, .ds-gap-*, .ds-m-*, .ds-p-*, .ds-print-*)

Theming

Themes provide CSS custom properties (e.g. --color-primary-rgb) that the component styles reference. Two themes are available:

• theme-default — included in digigov.css and digigov-plain.css
• theme-govgr — included in digigov.css

Use digigov-plain.css if you only need the default theme, or digigov-base.css if you want to provide your own theme variables.

Dark mode

Dark mode uses the class strategy. Add the dark class to an ancestor element to activate dark theme overrides.