Look and feel

Design system and CSS management

This project uses Tailwind in addition to the French State Design System (DSFR). DSFR is the primary design system, and Tailwind is mainly used to customize or extend styles when DSFR alone is not sufficient.

  • DSFR: integrated through the django-dsfr package (templates, components, tags) and @gouvfr/dsfr assets (CSS/JS).

  • Tailwind: configured in tailwind.config.js with a qf- class prefix to avoid conflicts with DSFR classes.

In practice, templates use both DSFR classes and components (buttons, header, footer, forms, etc.) and Tailwind classes with the qf- prefix (qf-flex, qf-mt-2w, etc.) for layout and visual fine‑tuning.

The DSFR colors and icons actually used are tracked in dsfr_hacks/ (color and icon extraction).

This prefix and other Tailwind customizations (colors, screens, plugins, etc.) are configured in webapp/tailwind.config.js.

For readability, try to group Tailwind classes by purpose on each line. For example, you can separate classes related to layout (flex, spacing, alignment) from those related to visual style (border, color, typography, background).

<div
  class="
  qf-flex qf-justify-around
  qf-border-solid qf-border-black qf-border-2
  qf-bg-white
"
></div>