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.

/* 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.

/* 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.

/* 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.

/* 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;
    }
}