Aller au contenu
1.6k

Typographie

Recettes polyvalentes pour les titres, le corps du texte, les listes, les tableaux et le code en ligne — mises en page dans un style néobrutaliste au rendu imposant.

Nous ne fournissons aucun style de typographie par défaut. Cette page montre comment styliser votre texte à l’aide des classes utilitaires.

Il n’y a aucun composant de typographie à installer — rien n’est livré par défaut. Chaque section ci-dessous est une recette de classes utilitaires à copier-coller pour un élément HTML brut (h1–h4, p, blockquote, table, listes, code en ligne), appuyée sur les tokens du thème pour que les titres sortent bien lourds et les bordures bien épaisses.

À privilégier dans ces cas :

  • Billets de blog et docs — faites correspondre la sortie MDX ou CMS à ces classes pour un style homogène des textes longs.
  • Pages marketing — h1, Lead et Large couvrent le texte du hero sans système typographique d’affichage à part.
  • Quand @tailwindcss/typography est disproportionné — copiez seulement les éléments dont vous avez besoin au lieu d’embarquer le plugin prose.

h1

Taxing Laughter: The Joke Tax Chronicles

export function TypographyH1() {
  return (
    <h1 className="scroll-m-20 text-center text-4xl font-extrabold tracking-tight text-balance">

h2

The People of the Kingdom

export function TypographyH2() {
  return (
    <h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0">

h3

The Joke Tax

export function TypographyH3() {
  return (
    <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">

h4

People stopped telling jokes

export function TypographyH4() {
  return (
    <h4 className="scroll-m-20 text-xl font-semibold tracking-tight">

p

The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.

export function TypographyP() {
  return (
    <p className="leading-7 [&:not(:first-child)]:mt-6">

blockquote

"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege." 
export function TypographyBlockquote() {
  return (
    <blockquote className="mt-6 border-l-2 pl-6 italic">

table

export function TypographyTable() {
  return (
    <div className="my-6 w-full overflow-y-auto">

list

  • 1st level of puns: 5 gold coins
  • 2nd level of jokes: 10 gold coins
  • 3rd level of one-liners : 20 gold coins
export function TypographyList() {
  return (
    <ul className="my-6 ml-6 list-disc [&>li]:mt-2">

Code en ligne

@radix-ui/react-alert-dialog
export function TypographyInlineCode() {
  return (
    <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">

Accroche

A modal dialog that interrupts the user with important content and expects a response.

export function TypographyLead() {
  return (
    <p className="text-xl text-muted-foreground">

Grand

Are you absolutely sure?
export function TypographyLarge() {
  return <div className="text-lg font-semibold">Are you absolutely sure?</div>
}

Petit

Email address
export function TypographySmall() {
  return (
    <small className="text-sm leading-none font-medium">Email address</small>

Atténué

Enter your email address.

export function TypographyMuted() {
  return (
    <p className="text-sm text-muted-foreground">Enter your email address.</p>

RTL

Pour activer le RTL dans Neobrutalism, consultez le guide de configuration RTL.

"use client"

import * as React from "react"

Accessibilité

Ces recettes stylent des éléments natifs : la sémantique est donc déjà correcte — gardez-la telle quelle. Choisissez les niveaux de titre selon le plan du document, pas selon la taille : les lecteurs d’écran naviguent par niveau, donc si un h2 paraît trop grand, restylez-le plutôt que de recourir à un h4. Donnez aux tableaux de données une ligne d’en-tête <th> pour que les cellules restent associées à leurs colonnes, et réservez blockquote aux véritables citations.