Skip to content
design system
Thème d’affichage, actuellement Auto

apps/web · SvelteKit · Tailwind for layout

Web app

The audit workspace: the lab, the report, the settings and the auth pages. The components come from the package; Tailwind lays out the pages and does nothing else.

What it imports

In apps/web/src/app.css, in this order. A test in the package holds the order for the two SvelteKit apps.

@import '@rgaa-dev/design/fonts.css';
@import '@rgaa-dev/design/tokens.css';
@import 'tailwindcss/base';
@import '@rgaa-dev/design/base.css';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Theme

The pre-paint script of the package is inlined in app.html; a test holds the copy equal to the file. The switch sits in the lab sidebar and on the auth shell, and reads and writes through @rgaa-dev/design/theme. Print is always the paper set, whatever the session's theme.

What Tailwind is for

Page layout only: grids, gaps, widths, the odd margin. The preset replaces the default palette, radii, shadows and weights with the tokens, so a utility cannot name a colour the system does not have, and rounded-lg, shadow-md or text-gray-500 do not exist. The package's components are not scanned: a component never emits a utility.

Documents it exports

The reports and declarations the app writes as standalone HTML, and the emails it sends, carry the tokens through generated modules (document-tokens.generated.ts in core, colours.generated.ts in the mail templates), never a pasted copy. The generator writes them from the same source as the stylesheet.

What it still writes by hand

Page layout only: Tailwind's utilities place the components on a page, and nothing else. Every screen is on the package's components, and the base layer's raw classes (btn-*, card, chip, tableau*, h-display, link-underline) are gone, so a raw use would render unstyled. The app's porte-composants test holds the counters at zero: button classes, hand-made fields, cards, chips, tables, progress bars and filter groups, confirm(), inline colours, French props and the weights the fonts do not have.

Components in use

31 of 86, as each doc declares under surfaces.