Configuration de Tailwind Css

Notre thème utilise Tailwind CSS pour fournir une expérience de design modulaire et personnalisable. Le fichier tailwind.config.js est au cœur de cette personnalisation, permettant de définir des thèmes, des variantes, et d'étendre les fonctionnalités par défaut de Tailwind.

1. Structure du fichier de configuration

Fichier à la racine du thème : /tailwind.config.js

Contenu

La propriété content spécifie les chemins vers les fichiers où Tailwind recherche les classes à compiler dans le build final. Cela inclut les fichiers Twig, PHP, et tout autre fichier susceptible de contenir des classes Tailwind.

content: [
  './Components/**/*.twig',
  './Partials/**/*.twig',
  './Templates/*.twig',
  './inc/*.php',
  './views/**/*.php',
  './views/**/*.twig',
  './*.php'
],

Mode Sombre

darkMode: 'class' 

Permet de gérer le mode sombre en ajoutant une classe spécifique (pseudo-selecteur dark:) à un élément racine.

Thème

La section theme définit les paramètres par défaut et les extensions de Tailwind, y compris les points de rupture pour la gestion responsive, les couleurs personnalisées, et les familles de polices etc.

Couleurs

Les couleurs du projet SNCF sont importées depuis tailwind-colors.json et assignées sous colors.sncf pour une utilisation facile dans les styles.

Certaines couleurs "par défaut" sont égalements définies.

const colors = require('tailwindcss/colors')
const projectColors = require('./tailwind-colors.json')

colors: {
    transparent: 'transparent',
    current: 'currentColor',
    black: colors.black,
    white: colors.white,
    gray: colors.gray,
    ...
    sncf: projectColors,
}

Screens

La section screens définit les points de rupture (breakpoints) pour le design responsive dans Tailwind CSS. Ces breakpoints déterminent les tailles d'écran auxquelles différents styles s'appliquent grâce à des préfixes dans les noms de classe. Voici une explication de cette section et de son utilisation :

screens: {
    'sm': '640px',  // => @media (min-width: 640px) { ... }
    'md': '768px',  // => @media (min-width: 768px) { ... }
    'lg': '1024px', // => @media (min-width: 1024px) { ... }
    'xl': '1280px', // => @media (min-width: 1280px) { ... }
    '2xl': '1536px',// => @media (min-width: 1536px) { ... }
},

Exemples de Classes avec Breakpoints

• sm:bg-sncf-lavande : Applique un arrière-plan lavande sur les écrans d'au moins 640 pixels de large.
• md:flex : Applique un display flex sur les écrans d'au moins 768 pixels de large.
• lg:grid : Transforme l'élément en grille sur les écrans d'au moins 1024 pixels de large.
• xl:text-4xl : Applique une taille de texte 4xl sur les écrans d'au moins 1280 pixels de large.
• 2xl:px-20 : Applique un padding horizontal de 20 sur les écrans d'au moins 1536 pixels de large.

Cela peux également servir en CSS via

.mon-element{
    @apply bg-sncf-lavande xl:bg-sncf-blanc;
}
@screen xl{
    .mon-element{
        @apply border-sncf-gris;
    }   
}

Extensions

extend permet d'ajouter de nouvelles valeurs pour des utilitaires comme les couleurs, l'espacement, les tailles de polices, etc., sans écraser les valeurs par défaut. Se référer à la documentation Tailwind Css.

En voici un exemple :

extend: {
    colors: {
        outline: '#ff0000',
    },
    padding: {
        '4.5': '1.15rem',
        '5.5': '1.35rem',
        '6.5': '1.6rem',
        '7.5': '1.9rem',
    },
    fontSize: {
        'sm' : ['0.875rem','1.19rem'],
        'base':['1rem',    '1.37rem'],
        'md' : ['1.12rem', '1.53rem'],
        'lg' : ['1.25rem', '1.71rem'],
        'xl' : ['1.50rem', '2.04rem'],
        '2xl': ['1.87rem', '2.56rem'],
        '3xl': ['2.25rem', '3.07rem'],
        '4xl': ['2.62rem', '3.58rem'],
    },
},

Plugins et Variants

La propriété variants permet d'ajouter des variantes de style pour les états comme hover ou focus et pour des classes personnalisées.

Les plugins permettent d'étendre Tailwind avec des fonctionnalités personnalisées, comme ici pour ajouter une variante renforce pour les besoins spécifiques de contraste

variants: {
    extend: {
        textColor: ['renforce'],
        backgroundColor: ['renforce'],
        // ... pour Ajoutez d'autres propriétés si nécessaire
    },
},
plugins: [
    function ({ addVariant, e }) {
        addVariant('renforce', ({ modifySelectors, separator }) => {
            modifySelectors(({ className }) => {
                return `.contraste-renforce .${e(`renforce${separator}${className}`)}`;
            });
        });
    },
]