Breakpoints

Points de rupture responsifs suivant une approche mobile-first. Les styles de base ciblent les plus petits ecrans, puis sont progressivement enrichis pour les ecrans plus larges.

Approche mobile-first

En Tailwind CSS, les prefixes de breakpoints (sm:, md:, lg:) correspondent a des min-width media queries. Les styles sans prefixe s'appliquent a toutes les tailles.

Echelle visuelle

Representation proportionnelle de chaque breakpoint.

375px

640px

768px

1024px

1280px

2xl

1536px

Details des breakpoints

Breakpoint	Min-width	Prefixe Tailwind	Description
xs	`375px`	`min-w-[375px]`	Petits smartphones (iPhone SE, etc.)
sm	`640px`	`sm:`	Grands smartphones en paysage, petites tablettes
md	`768px`	`md:`	Tablettes portrait (iPad Mini, etc.)
lg	`1024px`	`lg:`	Tablettes paysage, petits laptops
xl	`1280px`	`xl:`	Desktops standards
2xl	`1536px`	`2xl:`	Grands ecrans, moniteurs larges

Patterns responsifs courants

Exemples de classes Tailwind utilisees dans Speedcube Master.

Grilles adaptatives

grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4

1 colonne sur mobile, 2 sur tablette, 3 sur laptop, 4 sur desktop. Utilise pour les grilles d'algorithmes et les statistiques.

Navigation responsive

hidden md:flex / flex md:hidden

Menu hamburger sur mobile, navigation horizontale sur tablette et au-dessus.

Conteneur principal

max-w-6xl mx-auto px-4 sm:px-6 lg:px-8

Conteneur centre a 1152px max avec padding lateral adaptatif.

Typographie responsive

text-2xl sm:text-3xl lg:text-4xl font-bold tracking-tight

Titres qui grandissent avec la taille de l'ecran. Le timer utilise un pattern similaire pour rester lisible.

Layout flex adaptatif

flex flex-col sm:flex-row items-start sm:items-center gap-4

Elements empiles verticalement sur mobile, alignes horizontalement sur tablette et au-dessus.

Demo responsive

Redimensionnez votre fenetre pour observer le comportement.

Element 1

Element 2

Element 3

Element 4

1 colonne (mobile)2 colonnes (tablette)4 colonnes (desktop)