Tailwind
Tailwindcss
Debutant
Quiz-Tailwind-Debutant
Utility-First
Flexbox-Tailwind
Responsive-Tailwind
Tailwind-Config
Dark-Mode
Entretien-Tailwind
Qcm-Tailwind
Apprendre-Tailwind
Front-End
Css-Utility
📝
Entretien Tailwind CSS Débutant — Utilities et Bases
20 questions Tailwind CSS niveau débutant : utility-first, espacements, couleurs, Flexbox, breakpoints, hover, dark mode. Préparez votre premier entretien front-end.
Banque de révision : les 60 questions corrigées
Voici l'intégralité des 60 questions de « Entretien Tailwind CSS Débutant — Utilities et Bases », 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 :
Tailwind utilise
m-{n} pour margin (externe) et p-{n} pour padding (interne). L'échelle par défaut : 4 = 1rem, 2 = 0.5rem, 8 = 2rem. mx-4 = horizontal seulement, mt-4 = top seulement.
Explication :
L'échelle Tailwind est calée sur
0.25rem par unité : p-1 = 0.25rem, p-4 = 1rem, p-8 = 2rem, p-16 = 4rem. Astuce : multiplie l'unité par 0.25rem.
Explication :
Utility-first = on assemble des classes ultra-petites (
flex, p-4, text-red-500) directement dans le HTML, plutôt que d'écrire des classes sémantiques (.btn-primary) avec du CSS séparé. Avantage : pas de nommage à inventer, pas de CSS qui grossit, design system cohérent.
En entretien, mentionne le compromis : HTML plus verbeux mais CSS final minuscule (purge), refactoring plus rapide, design system imposé par
tailwind.config.js.
Explication :
L'échelle
font-weight de Tailwind : font-thin (100), font-light (300), font-normal (400), font-medium (500), font-semibold (600), font-bold (700), font-extrabold (800), font-black (900).
Explication :
text-center applique text-align: center. À ne pas confondre : justify-center aligne sur l'axe principal Flex/Grid, items-center sur l'axe transverse, align-* n'existe pas en Tailwind comme tel.
Explication :
En Tailwind, on utilise simplement
flex pour display: flex. Pour inline-flex : inline-flex. Pour grid : grid. Pas de préfixe d- (c'est Bootstrap).
Explication :
justify-* contrôle l'axe principal en Flexbox (horizontal par défaut). justify-center centre les enfants horizontalement. Pour centrer verticalement, utilise items-center (axe transverse).
Explication :
En Flexbox :
justify-content (Tailwind justify-*) gère l'axe principal (horizontal si flex-row). align-items (Tailwind items-*) gère l'axe transverse (vertical si flex-row). Pour centrer parfaitement : flex justify-center items-center.
Astuce d'entretien : si tu inverses la direction avec
flex-col, les rôles s'inversent aussi (justify devient vertical, items horizontal).
Explication :
Les couleurs Tailwind suivent
text-{couleur}-{intensité}. L'intensité va de 50 (très clair) à 950 (très sombre), avec 500 comme milieu de référence. Exemples : text-red-500, text-blue-600, text-gray-700.
Explication :
Pour le fond on utilise
bg-{couleur}-{intensité} et pour le texte text-{couleur}-{intensité}. text-white et text-black existent sans intensité (cas particuliers).
Explication :
rounded-full applique border-radius: 9999px, ce qui transforme un carré en cercle. Échelle : rounded-sm, rounded, rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-3xl, rounded-full.
Explication :
border (sans suffixe) applique border-width: 1px. La couleur se précise en plus avec border-{couleur}-{intensité}. Exemple complet : border border-gray-300. Sans border, la classe couleur n'a aucun effet visible (largeur = 0).
Explication :
Depuis Tailwind v3, le moteur JIT (Just-In-Time) scanne les fichiers déclarés dans
content: [] de tailwind.config.js et génère uniquement le CSS des classes détectées. Résultat : un CSS final souvent < 10 Ko gzipped, même avec un design riche.
À retenir : déclare bien tous tes patterns dans
content (HTML, JS, JSX, PHP, MDX...) sinon des classes seront supprimées en prod.
Explication :
invisible = visibility: hidden (l'élément n'apparaît pas mais occupe l'espace). hidden = display: none (retiré du flux). opacity-0 = transparent mais cliquable. sr-only = visible uniquement par les lecteurs d'écran.
Explication :
Tailwind est mobile-first : la classe sans préfixe s'applique partout, puis les préfixes
sm: md: lg: xl: 2xl: écrasent à partir du breakpoint. hidden md:block = caché par défaut (mobile), affiché en bloc dès md (≥768px).
Explication :
Breakpoints Tailwind par défaut :
sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px. Tous sont min-width (mobile-first). Modifiables dans theme.screens du config.
Explication :
Tailwind expose les pseudo-classes via des préfixes :
hover:, focus:, active:, disabled:, visited:, group-hover:... Exemple : bg-blue-500 hover:bg-blue-700 = bleu standard, plus sombre au survol.
Explication :
Le préfixe correct est
hover: (avec deux-points). hover:bg-blue-700 applique bg-blue-700 uniquement quand l'élément est survolé. On peut combiner plusieurs préfixes : md:hover:bg-blue-700 = au survol, à partir du breakpoint md.
Explication :
Échelle
box-shadow Tailwind : shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl, shadow-inner, shadow-none. drop-shadow-* est différent (filtre, contour réel des formes/transparences).
Explication :
w-full = width: 100% (relatif au parent). w-screen = 100vw (relatif à la fenêtre). w-auto = auto. w-100 n'existe pas dans l'échelle par défaut (c'est de la syntaxe Bootstrap).
Explication :
h-screen applique height: 100vh (hauteur de la viewport). h-full = 100% (relatif au parent). h-svh et h-dvh existent depuis v3.4 pour le viewport mobile dynamique.
Explication :
space-y-{n} applique une marge entre les enfants directs sur l'axe vertical (utile pour des stacks). space-x-{n} fait pareil sur l'axe horizontal. gap-{n} fonctionne uniquement sur Flex et Grid (pas sur du block classique).
Explication :
gap-{n} est la propriété CSS moderne (compatible Flex et Grid depuis 2021). Plus propre que space-x-* car elle gère le wrapping. gap-x-4 et gap-y-4 permettent de différencier horizontal/vertical.
Explication :
space-x-4 applique margin-left à tous les enfants sauf le premier — ça marche bien sur une seule ligne, mais quand les enfants wrappent, la marge gauche apparaît au début de la nouvelle ligne et casse l'alignement. gap-4 gère proprement les sauts de ligne car c'est la propriété CSS native pour Flex/Grid.
Règle simple : si ton flex contient
flex-wrap ou si c'est du grid, utilise toujours gap-*.
Explication :
Le Play CDN Tailwind (
https://cdn.tailwindcss.com) est un script JS qui génère le CSS à la volée dans le navigateur. Idéal pour un prototype ou un Codepen, mais déconseillé en production (poids, FOUC). En prod, utilise l'install npm + build.
Explication :
tailwind.config.js (ou .ts) contient la configuration : chemins content, thème personnalisé (theme.extend), plugins, dark mode... Généré via npx tailwindcss init.
Explication :
Les 3 directives obligatoires (Tailwind v3) :
@tailwind base (reset preflight), @tailwind components (composants), @tailwind utilities (utilitaires). À placer en haut du fichier CSS principal traité par PostCSS. Note : Tailwind v4 introduit @import "tailwindcss"; simplifié.
Explication :
italic = font-style: italic. not-italic annule cet état (utile en hover ou breakpoint).
Explication :
underline applique text-decoration: underline. Variantes : line-through (barré), overline, no-underline (annuler), decoration-{couleur}, decoration-{épaisseur}.
Explication :
uppercase, lowercase, capitalize, normal-case contrôlent text-transform. Pas de préfixe text-.
Explication :
L'échelle
font-size Tailwind : text-xs (0.75), text-sm (0.875), text-base (1rem), text-lg (1.125), text-xl (1.25), text-2xl (1.5)... text-md n'existe pas par défaut.
Explication :
mx-auto applique margin-left: auto + margin-right: auto. Combiné avec une largeur fixe (ex: w-1/2 ou max-w-xl), cela centre le bloc dans son parent.
Explication :
max-w-{taille} applique max-width. Échelle : max-w-xs (20rem), max-w-sm, max-w-md, max-w-lg, max-w-xl, max-w-2xl... max-w-4xl = 56rem (≈896px).
Explication :
cursor-pointer = cursor: pointer (la main). Autres valeurs utiles : cursor-default, cursor-not-allowed, cursor-wait, cursor-text, cursor-move, cursor-grab.
Explication :
L'échelle d'intensité (
50, 100, 200, ..., 900, 950) est calibrée pour le contraste. blue-500 a un contraste lisible avec blue-50 ou blue-900. Cela facilite : alternance claire/sombre, hover plus foncé (blue-600), états désactivés (blue-300), accessibilité WCAG AA.
En entretien : Tailwind 3.0+ utilise OKLCH (espace perceptuel), garantissant des écarts de luminosité réguliers entre intensités.
Explication :
grid grid-cols-3 applique display: grid + grid-template-columns: repeat(3, minmax(0, 1fr)). Pour des lignes : grid-rows-{n}. Pour fusionner : col-span-{n}, row-span-{n}.
Explication :
flex-1 = flex: 1 1 0% (grow + shrink + base 0). Variantes : flex-auto (1 1 auto), flex-initial (0 1 auto), flex-none (none). Pour grow seul : grow, grow-0.
Explication :
hidden applique display: none et retire l'élément du flux. À combiner avec un breakpoint pour conditionner l'affichage : hidden md:block.
Explication :
Tailwind nomme directement les valeurs :
static, relative, absolute, fixed, sticky. Les offsets se font avec top-{n}, right-{n}, bottom-{n}, left-{n}, inset-{n} (les 4 d'un coup).
Explication :
Combine
absolute + top-0 + right-0. Important : le parent doit avoir relative sinon l'élément se positionne par rapport à <body>.
Explication :
Préfixe
overflow-{valeur} : overflow-auto, overflow-hidden, overflow-clip, overflow-visible, overflow-scroll. Possibilité d'axer : overflow-x-*, overflow-y-*.
Explication :
truncate est un raccourci qui combine overflow: hidden + text-overflow: ellipsis + white-space: nowrap. Pour limiter à plusieurs lignes : line-clamp-2, line-clamp-3...
Explication :
En pratique, les composants React/Vue/Angular utilisent
clsx (ou classnames) pour assembler des classes conditionnelles, et tailwind-merge pour résoudre les conflits (ex: p-2 + p-4 doit garder p-4). Combo très utilisé : cn(...) dans shadcn/ui.
Pattern
cn() = twMerge(clsx(...args)), devenu standard dans l'écosystème (shadcn, Vercel, etc.).
Explication :
transition-all = transition-property: all avec durée 150ms par défaut. transition sans suffixe couvre les propriétés communes (color, bg, opacity, transform...). Pour personnaliser : duration-300, ease-in-out, delay-100.
Explication :
opacity-{n} où n va de 0 à 100 par pas de 5/10. opacity-0, opacity-25, opacity-50, opacity-75, opacity-100. Pour des valeurs custom : opacity-[0.42] (syntaxe arbitraire).
Explication :
tracking-{n} contrôle letter-spacing : tracking-tighter, tracking-tight, tracking-normal, tracking-wide, tracking-wider, tracking-widest. leading-* contrôle line-height, à ne pas confondre.
Explication :
leading-{n} = line-height. Échelle : leading-none (1), leading-tight (1.25), leading-snug (1.375), leading-normal (1.5), leading-relaxed (1.625), leading-loose (2), ou leading-{number} en rem.
Explication :
Depuis Tailwind v3, la syntaxe arbitraire entre crochets permet n'importe quelle valeur :
w-[123px], bg-[#1a2b3c], text-[14.5px], top-[calc(50%-2rem)]. À utiliser avec parcimonie (échappe au design system).
Explication :
darkMode: 'class' active le mode sombre quand <html class="dark"> est présent (contrôle JS). 'media' suit prefers-color-scheme. 'selector' (v3.4) permet un sélecteur custom. Usage : bg-white dark:bg-gray-900.
Explication :
Le préfixe officiel est
dark:. Combinable avec d'autres préfixes : md:dark:hover:bg-gray-800 = au survol, en mode sombre, à partir de md.
Explication :
Combo Tailwind :
bg-gradient-to-{direction} + from-{couleur} + (via-*) + to-*. Directions : -r, -l, -t, -b, -tr, -tl, -br, -bl. Tailwind v4 utilise bg-linear-to-r.
Explication :
Le préfixe
placeholder: cible ::placeholder. Exemple : <input class="placeholder:text-gray-400 placeholder:italic" />. Autres pseudo-éléments : before:, after:, first-letter:, marker:.
Explication :
L'échelle contraint le designer, ce qui produit un rythme visuel cohérent : marges, paddings, tailles partagent un multiple commun (
0.25rem). Sans ça, on retrouve des 13px, 17px, 23px qui cassent l'harmonie. La syntaxe arbitraire [123px] reste possible mais doit être l'exception.
Argument design : un design system rigoureux est plus rapide à maintenir qu'une infinie liberté pixel-parfaite.
Explication :
Échelle
z-index Tailwind : z-0, z-10, z-20, z-30, z-40, z-50, z-auto. Pour des valeurs personnalisées : z-[999].
Explication :
text-{left|center|right|justify|start|end} contrôle text-align. justify-end est pour Flex/Grid (axe principal), à ne pas confondre.
Explication :
Tailwind nomme directement les valeurs :
block, inline, inline-block, flex, inline-flex, grid, inline-grid, contents, flow-root, hidden.
Explication :
Tailwind permet de cibler chaque côté :
border-t (top), border-r (right), border-b (bottom), border-l (left), border-x (gauche+droite), border-y (haut+bas). Avec épaisseur : border-b-2, border-t-4...
Explication :
object-{fit} : object-cover (couvre, peut couper), object-contain (contient, lettrebox), object-fill, object-none, object-scale-down. Combine avec object-{position} : object-center, object-top, etc.
Explication :
Trois approches valables : (1) composant (React/Vue/Angular) — la plus recommandée car réutilise aussi le comportement ; (2)
@apply .btn { @apply px-4 py-2 bg-blue-500 ...; } dans un fichier CSS, utile pour quelques composants courts ; (3) partial PHP/HTML pour du templating server-side. La doc Tailwind déconseille @apply à outrance car cela recrée le problème CSS classique.
En entretien : prouve que tu connais les compromis.
@apply est légitime pour .btn, .card, mais pas pour .dashboard-page.
Explication :
@apply permet d'embarquer des classes utilitaires Tailwind dans une classe CSS : .btn { @apply px-4 py-2 bg-blue-500 text-white rounded; } À utiliser avec parcimonie (la philosophie reste utility-first dans le HTML). 
Quiz
Junior
20 questions
15 min
Entretien Tailwind CSS Junior — Layout, Plugins, Variants
Quiz
Débutant
20 questions
15 min
Entretien CSS Débutant — Sélecteurs et Box Model
Quiz
Débutant
20 questions
15 min
HTML Débutant — Balises et structure
Quiz
Débutant
20 questions
15 min
Entretien React Débutant — Composants, Props et State
Quiz
Débutant
20 questions
15 min
Entretien TypeScript Débutant — Types et Interfaces
Quiz
Senior
20 questions
15 min
Entretien Tailwind CSS Senior — Architecture, Plugins, v4
Quiz
Débutant
20 questions
15 min
Entretien Angular Débutant — Composants, Pipes et Routing
Quiz
Débutant
20 questions
15 min
jQuery Débutant — DOM & Sélecteurs
Quiz
Débutant
20 questions
15 min
Entretien Next.js Débutant : pages, routing et SSR
Quiz
Débutant
20 questions
15 min
Entretien JavaScript Débutant : variables et syntaxe
Quiz
Débutant
20 questions
15 min
Vue Débutant — Composants & Router
Quiz
Débutant
20 questions
15 min
Entretien Vanilla JS Débutant — DOM et Événements
Quiz
Débutant
20 questions
15 min
Scrum Débutant — Rôles et Artifacts
Quiz
Débutant
20 questions
15 min
Entretien Git Débutant — Commits, Branches et Remote
Quiz
Débutant
20 questions
15 min
Entretien Node.js Débutant — Modules, NPM et Callbacks
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
Débutant
20 questions
15 min
Entretien Spring Boot Débutant : annotations et IoC
Quiz
Débutant
20 questions
15 min
NestJS Débutant — Modules & Services
Quiz
Senior
20 questions
15 min