Tailwind
Tailwindcss
Junior
Quiz-Tailwind-Junior
Tailwind-Grid
Group-Hover
Peer-Checked
Tailwind-Config
Tailwind-Plugins
Container-Queries
Tailwind-Animations
Entretien-Tailwind-Junior
Qcm-Tailwind-Junior
Front-End
📝
Entretien Tailwind CSS Junior — Layout, Plugins, Variants
20 questions Tailwind niveau junior : Flexbox/Grid avancés, group/peer, theme.extend, plugins forms/typography, animations, container queries, accessibilité.
Banque de révision : les 60 questions corrigées
Voici l'intégralité des 60 questions de « Entretien Tailwind CSS Junior — Layout, Plugins, Variants », chacune avec sa bonne réponse et son explication. Le quiz interactif ci-dessus en tire une sélection aléatoire à chaque tentative — utilisez cette liste complète pour réviser.
Explication :
flex-wrap active le retour à la ligne des enfants. Échelle : flex-wrap, flex-wrap-reverse, flex-nowrap. À combiner avec flex (le parent) pour fonctionner.
Explication :
grow = flex-grow: 1 (peut grandir). shrink-0 = flex-shrink: 0 (ne rétrécit pas). Combo utile : un sidebar fixe à côté d'un contenu fluide → sidebar reçoit shrink-0, contenu reçoit grow (ou flex-1).
Explication :
Pattern : on ajoute
group sur le parent et group-hover:* sur les enfants. Quand le parent est survolé, les enfants prennent le style. Très utilisé pour des cards interactives : <div class="group">
<img class="opacity-80 group-hover:opacity-100" />
<span class="text-gray-500 group-hover:text-blue-500">Voir</span>
</div>
Existe aussi en
peer/peer-checked:/peer-focus: pour cibler un sibling marqué peer (utile pour des inputs custom sans JS).
Explication :
Le sibling-input doit avoir
peer, le frère stylé utilise peer-checked:*, peer-focus:*, peer-invalid:*... Permet des toggles/checkbox custom CSS-only : <input type="checkbox" class="peer hidden" />
<label class="peer-checked:bg-blue-500">...</label>
Explication :
La syntaxe arbitraire
grid-cols-[...] permet d'injecter directement grid-template-columns. repeat(auto-fit, minmax(200px, 1fr)) est le pattern responsive classique : autant de colonnes que possible, chacune ≥ 200px. Alternative : définir gridTemplateColumns dans theme.extend.
Explication :
col-span-{n} = grid-column: span n. Variantes : row-span-{n}, col-start-{n}, col-end-{n}, col-span-full (toute la largeur).
Explication :
Deux options : (1)
theme.extend.colors = ajoute ta couleur sans toucher aux couleurs par défaut (recommandé). (2) theme.colors directement = remplace toutes les couleurs (dangereux). Pour avoir des intensités : brand: { 50: '#...', 500: '#1d4ed8', 900: '#...' }, puis bg-brand-500.
En entretien : insiste sur
extend vs override. Override casse red-500, blue-500 etc.
Explication :
aspect-video = 16/9 (alias). Autres alias : aspect-square (1/1), aspect-auto. Valeurs custom : aspect-[4/3], aspect-[2/1].
Explication :
Tailwind fournit 4 animations par défaut :
animate-spin (rotation 360° infinie, pour spinners), animate-ping (pulse), animate-pulse (fondu), animate-bounce. Pour custom : ajouter dans theme.extend.animation + theme.extend.keyframes.
Explication :
Pattern : theme: {
extend: {
keyframes: {
'fade-in': { '0%': {opacity: 0}, '100%': {opacity: 1} }
},
animation: {
'fade-in': 'fade-in 0.5s ease-out'
}
}
}Usage HTML :
animate-fade-in.
Tu peux aussi écrire le keyframe dans un fichier CSS et exposer une classe via
@layer utilities.
Explication :
@tailwindcss/forms normalise les <input>, <select>, <textarea>, <checkbox> pour qu'ils soient stylables avec les classes Tailwind sans réinitialisation manuelle. Mode strategy: 'class' pour ne styler que .form-input.
Explication :
@tailwindcss/typography fournit prose, prose-lg, prose-invert (dark mode), prose-headings:text-blue-500... Idéal pour styler du contenu Markdown rendu sans toucher manuellement chaque <h1>, <p>, <blockquote>.
Explication :
Tailwind expose les pseudo-éléments :
before:, after:, first-letter:, first-line:, marker:, placeholder:, file:, selection:. first: sans suffixe cible :first-child, à ne pas confondre.
Explication :
line-clamp-{n} applique -webkit-line-clamp: n + display: -webkit-box + ellipsis. line-clamp-none annule. Disponible nativement depuis Tailwind v3.3 (avant via plugin @tailwindcss/line-clamp).
Explication :
motion-reduce:* applique le style si l'utilisateur a activé la réduction des animations dans son OS (accessibilité). motion-safe:* est l'inverse. Exemple : animate-bounce motion-reduce:animate-none.
Explication :
@layer base = reset/styles globaux (h1, body...). @layer components = composants réutilisables (ex. .btn via @apply). @layer utilities = utilitaires custom. Avantages : (1) spécificité gérée par couche, (2) classes purgées si non utilisées dans le HTML.
Avec Tailwind v4,
@layer tire profit des Cascade Layers natives CSS — encore plus de contrôle.
Explication :
Pour Tailwind v3, les 3 directives séparées sont obligatoires. Note v4 : la syntaxe se simplifie en
@import "tailwindcss";.
Explication :
scale-{n} où n est en pourcentage : scale-100 (1.0), scale-105 (1.05), scale-110 (1.10), scale-125, scale-150. Disponible aussi scale-x-* et scale-y-*.
Explication :
Depuis Tailwind v3.4, les transformations 3D sont natives :
rotate-x-*, rotate-y-*, rotate-z-*, translate-z-*, scale-z-*. Combiner avec transform-3d (parent) et perspective-{n}.
Explication :
theme: { colors: { brand: '#...' } } écrase TOUTES les couleurs (tu perds red-500, blue-500 etc.). theme: { extend: { colors: { brand: '#...' } } } ajoute simplement brand-* au système existant. Toujours préférer extend sauf cas exceptionnel (rebrand total).
Une exception légitime à
theme sans extend : limiter le design system à un set strict de couleurs (souvent en agence).
Explication :
Container queries : déclarer
@container sur le parent, puis utiliser @sm:, @md:, @lg:... sur les enfants. Le breakpoint dépend de la largeur du parent, pas de la fenêtre. Indispensable pour des composants vraiment responsive (cards qui s'adaptent à leur slot).
Explication :
flex-row-reverse et flex-col-reverse inversent visuellement l'ordre. Utile pour swapper texte/image en mobile vs desktop : flex-col md:flex-row-reverse. Pour ordonner individuellement : order-1, order-2, order-first, order-last.
Explication :
Combo :
snap-x (axe), snap-mandatory ou snap-proximity (rigueur). Sur les enfants : snap-start, snap-center, snap-end. Idéal pour des carousels CSS-only.
Explication :
Dans
tailwind.config.js : module.exports = {
corePlugins: { preflight: false }
}Désactive le reset CSS global. Utile quand on intègre Tailwind dans un projet existant (Bootstrap, WordPress, etc.) sans casser ses styles natifs.
Explication :
backdrop-blur-{n} applique backdrop-filter: blur(...) (flou de l'arrière-plan, à travers une transparence). blur-{n} est différent : il floute le contenu lui-même. Échelle : backdrop-blur-sm, -md, -lg, -xl, -2xl, -3xl.
Explication :
theme.extend.screens: { tablet: '900px', wide: '1400px' } ajoute des breakpoints. Usage : tablet:flex, wide:grid-cols-4. On peut aussi définir des max-width : 'max-md': { max: '767px' }, ou des ranges complexes.
Explication :
sticky = position: sticky, mais sans top-0 (ou autre offset), il ne « colle » à rien. Combo classique : sticky top-0 z-50 bg-white pour un header. Attention : le parent ne doit pas avoir overflow: hidden sinon ça ne fonctionne pas.
Explication :
Les préfixes par défaut sont
sm:, md:, lg:, xl:, 2xl: — toujours min-width (mobile-first). min-md: n'existe pas par défaut (à moins d'avoir custom-configuré). Pour cibler du max-width, on définit dans le config : 'max-md': { max: '767px' }.
Explication :
overflow-x-{value} et overflow-y-{value} contrôlent chaque axe. Combo classique pour empêcher le scroll horizontal : overflow-x-hidden.
Explication :
content liste les fichiers à scanner pour détecter les classes utilisées. Si un fichier est oublié (ex: './resources/views/**/*.blade.php'), ses classes ne seront pas générées en prod. Pièges courants : classes construites dynamiquement ('bg-' + color), HTML rendu côté serveur, fichiers MDX, partials.
Astuce : pour les classes dynamiques, utilise la safelist :
safelist: ['bg-red-500', { pattern: /bg-(red|green|blue)-(500|700)/ }].
Explication :
focus-visible:* applique le style uniquement quand le focus est navigué au clavier (pas au clic souris). C'est l'approche moderne pour des outlines accessibles sans pollution visuelle au clic. focus-within:* cible un parent quand un de ses enfants reçoit le focus.
Explication :
focus-within:* applique le style à un parent quand un de ses descendants a le focus. Très utile pour styler un wrapper de formulaire quand l'input est actif : <label class="focus-within:ring-2">...</label>.
Explication :
ring-{n} applique un anneau d'ombrage (similaire à outline mais via box-shadow, donc respecte le border-radius). Échelle : ring-1, ring-2, ring-4, ring-8, ring-inset, ring-{couleur}-{intensité}.
Explication :
ring = box-shadow: 0 0 0 Npx color. Avantages : (1) ne décale pas le layout (box-shadow n'occupe pas d'espace), (2) suit le border-radius, (3) cumulable. border ajoute de l'épaisseur réelle, peut décaler les éléments. Très utilisé pour les états focus accessibles.
Astuce : combiner
ring-2 ring-offset-2 ring-offset-white pour un anneau qui « flotte » à distance de l'élément (style très moderne).
Explication :
sr-only = pattern screen-reader only (taille 1px, clip absolu, etc.). L'élément est invisible visuellement mais lu par les lecteurs d'écran. hidden et invisible retirent l'élément aux lecteurs aussi. Inverse : not-sr-only rend visible.
Explication :
contents = display: contents : l'élément disparaît visuellement mais ses enfants prennent sa place dans le layout du parent. Utile pour wrapper un fragment React sans casser un grid/flex parent.
Explication :
Tailwind v3 introduit la syntaxe
{couleur}/{opacity} : bg-blue-500/50 = bleu à 50%. opacity-50 impacte aussi le contenu (texte, images). bg-opacity-50 existait avant v3 mais reste accepté pour la rétro.
Explication :
accent-{couleur}-{intensité} stylise les <input type="checkbox">, type="radio", type="range" nativement (depuis CSS accent-color). Léger et accessible. Utiliser plutôt que de réécrire un checkbox custom dans la majorité des cas.
Explication :
Pattern :
bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100. Réfléchir par paire (clair+sombre) sur chaque couleur (background, texte, border, ring). Astuce : créer des tokens custom dans theme.extend.colors (surface, primary, on-primary...) — réduit la verbosité et maintient la cohérence.
En entretien : citer les design tokens CSS (vars) avec values qui changent selon
.dark = approche moderne, scaling pour gros design system.
Explication :
cursor-not-allowed = cursor: not-allowed. Pour cibler uniquement quand le bouton est désactivé : disabled:cursor-not-allowed disabled:opacity-50. Le préfixe disabled: cible :disabled.
Explication :
pointer-events-none = l'élément ignore les clics (laisse passer aux éléments en dessous). pointer-events-auto = comportement par défaut. Utile pour des overlays qui doivent rester transparents aux interactions.
Explication :
selection:* cible ::selection (le pseudo-élément du texte surligné par la souris). Exemple : selection:bg-yellow-200 selection:text-black. Doit être placé sur le bloc texte concerné, ou globalement sur <body>.
Explication :
Pour qu'un
::before ou ::after apparaisse, il faut content. Tailwind expose : before:content-['*'] (string), before:content-empty (vide depuis v3.4), ou la syntaxe arbitraire before:content-[""].
Explication :
Approche composant (recommandée pour SPA) : un
<Button variant="primary"> qui rend les bonnes classes. Approche @apply (légitime pour HTML pur, server-rendered) : @layer components {
.btn { @apply px-4 py-2 rounded font-medium; }
.btn-primary { @apply btn bg-blue-500 text-white hover:bg-blue-600; }
}Les deux sont OK. La doc Tailwind privilégie le composant.
À éviter :
@apply sur des classes avec préfixe (md:, hover:) — possible mais ralenti la compil et casse souvent l'intent.
Explication :
grayscale = 100%. grayscale-0 = 0% (annule). Échelle aussi : grayscale-50 (50% via syntaxe arbitraire). Autres filtres : blur-*, brightness-*, contrast-*, hue-rotate-*, invert, saturate-*, sepia.
Explication :
after:content-[...] permet n'importe quelle valeur. Exemple : after:content-['*'] after:text-red-500 ajoute un astérisque rouge après l'élément. Pour des espaces : content-['_'] ou content-['\\00a0'].
Explication :
aspect-[16/9], aspect-[4/3], aspect-[1.618/1] (nombre d'or) sont possibles via la syntaxe arbitraire. Plus propre que d'inscrire padding-bottom en bricolage. Combiner avec w-full object-cover pour des images responsive.
Explication :
first:* = :first-child. last:* = :last-child. odd:*, even:* aussi. À ne pas confondre avec first-letter: (pseudo-élément).
Explication :
justify-{value} mappe sur justify-content : justify-start, justify-end, justify-center, justify-between, justify-around, justify-evenly.
Explication :
resize-{axe} : resize-none, resize-y, resize-x, resize (les deux). Utile sur <textarea> pour limiter le redimensionnement.
Explication :
Échelle :
list-none, list-disc, list-decimal. Position : list-inside, list-outside. Le marqueur peut être stylé avec marker:text-blue-500.
Explication :
theme() permet d'utiliser les valeurs du config dans du CSS classique : .alert { background: theme('colors.red.50'); padding: theme('spacing.4'); }Utile dans @layer base ou en CSS-in-JS. Conserve la cohérence avec le design system. Aussi disponible : theme('spacing.4'), theme('fontSize.lg').
En Tailwind v4,
theme() est remplacé/complété par les @theme et les CSS variables natives.
Explication :
will-change-{property} hint le navigateur que la propriété va changer (déclenche optimisation GPU). Échelle : will-change-auto, will-change-scroll, will-change-contents, will-change-transform. À utiliser parcimonieusement (impact mémoire).
Explication :
isolate = isolation: isolate = crée un nouveau stacking context sans positionner l'élément. Très utile pour résoudre des problèmes de z-index qui « dépassent » d'un sous-arbre. isolation-auto annule.
Explication :
Quand
darkMode: 'media' dans le config, dark:* écoute @media (prefers-color-scheme: dark) automatiquement. Plus simple mais l'utilisateur ne peut pas forcer un mode (vs 'class' ou 'selector' qui permettent un toggle JS).
Explication :
scroll-smooth sur l'élément qui scroll (souvent html). scroll-auto annule. Pour des ancres internes (<a href="#section">), donne un scroll animé natif.
Explication :
caret-{couleur}-{intensité} change la couleur du curseur clignotant dans les inputs et textareas. Souvent négligé, contribue à la cohérence visuelle d'un design system.
Explication :
Le pattern
auto-fit + minmax est fluide : autant de colonnes que la largeur le permet, chaque colonne ≥ 280px et étirée à 1fr. Pas besoin de breakpoints. Idéal quand on ne sait pas combien de cards seront affichées. Le pattern classique avec breakpoints reste pertinent pour des layouts plus contrôlés (ex: dashboard).
Variante :
auto-fill (laisse des colonnes vides à la fin) vs auto-fit (étire les colonnes existantes).
Explication :
decoration-{n} contrôle l'épaisseur (decoration-1, -2, -4, -8, -auto, -from-font). decoration-{couleur}-{intensité} change la couleur. decoration-{style} (solid, dashed, dotted, wavy).
Explication :
Le moteur JIT de Tailwind v3+ génère uniquement les classes utilisées (détectées via
content). Bonnes pratiques : (1) lister tous les chemins source dans content, (2) éviter theme qui régénère tout, (3) éviter de construire des classes en string ('bg-' + color = invisible au scanner — utiliser une safelist), (4) ne pas charger le Play CDN en prod.
À l'audit Lighthouse : un projet Tailwind bien configuré sort souvent < 15 Ko CSS gzipped, vs > 100 Ko si mal purgé.
Quiz
Senior
20 questions
15 min
Entretien Tailwind CSS Senior — Architecture, Plugins, v4
Quiz
Débutant
20 questions
15 min
Entretien Tailwind CSS Débutant — Utilities et Bases
Quiz
Junior
20 questions
15 min
Entretien CSS Junior — Flexbox et Responsive
Quiz
Junior
20 questions
15 min
Entretien TypeScript Junior — Generics, Classes et Modules
Quiz
Junior
20 questions
15 min
Entretien JavaScript Junior — Closures, DOM et Async
Quiz
Junior
20 questions
15 min
Entretien jQuery Junior : AJAX, plugins et perf
Quiz
Junior
20 questions
15 min
Entretien React Junior : Hooks, Context et Router
Quiz
Junior
20 questions
15 min
Entretien Next.js Junior : data fetching et middleware
Quiz
Junior
20 questions
15 min
Entretien Vue Junior : Composition API et Pinia
Quiz
Junior
20 questions
15 min
HTML Junior — Sémantique et accès
Quiz
Junior
20 questions
15 min
Entretien Git Junior — Merge, Rebase et Conflits
Quiz
Junior
20 questions
15 min
Entretien Node.js Junior — Express, REST et Middleware
Quiz
Junior
20 questions
15 min
NestJS Junior — Guards & Middleware
Quiz
Intermediate
20 questions
15 min
AngularJS — Entretien Junior
Quiz
Junior
20 questions
15 min
Python Django/FastAPI Junior — DRF & Injection
Quiz
Senior
20 questions
15 min
Entretien CSS Senior — Architecture et Performance
Quiz
Débutant
20 questions
15 min
Entretien CSS Débutant — Sélecteurs et Box Model
Quiz
Junior
20 questions
15 min
Entretien Angular Junior — Signals, RxJS et @defer
Quiz
Débutant
20 questions
15 min
Entretien Vanilla JS Débutant — DOM et Événements
Quiz
Senior
20 questions
15 min