Thèmes

Documentation Tailwind CSS

Vous avez dû le remarquer mais tous les composants qui vous ont été présentés sont stylisés avec des classes utilitaires. Celles-ci proviennent de la lib Tailwind CSS. C’est grâce à cet outil que nous allons construire et personnaliser le thème de notre application

Si vous ne connaissez pas cette lib, nous vous conseillons vivement d'aller jeter un coup d'oeil à la documentation avant toute chose.

Si vous souhaitez ne pas utiliser Tailwind CSS, veuillez vous référer à la documentation de l'astuce Retirer Tailwind CSS du projet. .

Les principaux fichiers css sont stockés dans assets/styles. Ils seront “la base” de notre stylisation (variables css, classes, éléments, règle générale, …, par défaut). Quant aux thèmes, ils rajoutent une couche à ces fichiers et les modifient.

Nous pourrions avoir dans le dossier style un seul fichier css mais il vaut mieux organiser tout ça, comme ci-dessous par exemple:

• theme.css dans lequel les variables css sont définies.

/* src/assets/styles/theme.css */

@theme {
    --color-primary: #5fbabf;
    --color-secondary: #fc8c8c;
}

• base.css où les règles css générales de notre application sont définies.

/* src/assets/styles/base.css */

@layer base {
    * {
        @apply box-border p-0 m-0;
        -ms-overflow-style: none;
        scrollbar-width: none;

    }

    *::-webkit-scrollbar {
         display: none;
    }
}

• style.css qui joue le rôle de point d'entrée de tous les fichiers css.

/* src/assets/styles/style.css */

@import "tailwindcss";

@layer theme, base;

@import "./theme.css" layer(theme);
@import "./base.css" layer(base);

Ceci est une organisation comment une autre mais qui reste conventionnelle. Vous serez sûrement amené à la modifier selon vos besoins .

Les thèmes sont rangés dans assets/themes. De la même manière que la “base” css, un “thème” peut se décliner en plusieurs fichiers ou en un seul.

/* src/assets/themes/smart-maker.theme.css */

@import "tailwindcss";

@theme {
    --color-primary: var(--color-blue-500);
    --color-secondary: var(--color-red-500);
}

@layer base {
    button {
        @apply shadow-md;
    }
}

Les fichiers css sont importés dans main.jsx.

// src/main.jsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import "./assets/styles/style.css";
import "./assets/themes/smart-maker.theme.css";

import { App } from "./App";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Dans cet exemple, le fichier thème est importé en second afin qu'il puisse influé sur le style de “base”.