Référence Tailwind

Chaque élément accepte des classes Tailwind CSS dans sa prop class (et des classes conditionnelles dans classList). NSH les résout en Rust par rapport au thème par défaut de Tailwind 4 : JS ne transmet que la chaîne, chaque chaîne distincte est analysée une seule fois puis mise en cache, et les variantes comme dark: ou active: sont réévaluées nativement lorsque l’apparence, la taille de la fenêtre ou l’état d’appui change, sans exécuter de JS.

Chaque utilitaire définit exactement ce que Tailwind CSS 4 génère pour lui, avec la même signification que dans un navigateur. Cette page liste ce qui est pris en charge. Pour une introduction, voir Tailwind ; pour les clés de style que les utilitaires définissent, voir la référence des styles.

Les composants Rust n’acceptent pas de chaînes de classes : ils stylent les éléments avec les méthodes typées de Styled (nsh_core::prelude), nommées d’après ces utilitaires et résolues vers les mêmes valeurs, échelles par défaut de Tailwind comprises (px-4 est .px_4(), rounded-2xl .rounded_2xl(), shadow-md .shadow_md(), bg-linear-to-br .bg_linear_to_br()). Les couleurs sont des valeurs : couleurs du thème, ou palette de Tailwind sous la forme nsh_core::element::palette (ZINC.shade(800) vaut zinc-800). Les variantes sont des méthodes qui prennent une closure de styles : .active(|s| …), .hover(…), .focus(…), .disabled_style(…), .dark(…), .group_active(…), et .style_when(condition, …) pour le reste. La référence des styles nomme la méthode de chaque clé de style.

use nsh_core::{element::palette::{RED, ZINC}, prelude::*};

view()
    .flex_row()
    .items_center()
    .gap_3()
    .rounded_2xl()
    .bg(white())
    .p_4()
    .shadow_md()
    .active(|s| s.scale(0.98))
    .transition()
    .dark(|s| s.bg(ZINC.shade(800)))
    .child(
        text("Inbox")
            .text_base()
            .font_weight(FontWeight::SEMIBOLD)
            .text_color(ZINC.shade(900))
            .dark(|s| s.text_color(white())),
    )
    .child(
        text(move || unread.get().to_string())
            .text_color(move || if unread.get() > 0 { RED.shade(500) } else { ZINC.shade(400) }),
    )

<View class="flex-row items-center gap-3 rounded-2xl bg-white p-4 shadow-md active:scale-[0.98] transition dark:bg-zinc-800">
  <Text class="text-base font-semibold text-zinc-900 dark:text-white">Inbox</Text>
  <Text classList={{ "text-red-500": unread() > 0, "text-zinc-400": unread() === 0 }}>{unread()}</Text>
</View>

#Comment les classes se combinent

• La dernière l’emporte. Parmi les utilitaires d’un même niveau de variante, celui qui se trouve le plus loin dans la chaîne l’emporte : "p-4 p-2" donne p-2. Un composant peut accepter une prop class et l’ajouter à ses propres classes sans tailwind-merge.
• Les variantes s’appliquent après les utilitaires simples, dans l’ordre des variantes de Tailwind : group-*: (par leur état, puis par nom de groupe), selection:, placeholder:, position (first: …), checked:, indeterminate:, selected:, focus-within:, hover:, focus:, focus-visible:, active:, enabled:, disabled:, aria-busy:, aria-checked:, aria-expanded:, aria-pressed:, aria-selected:, data-*: (par nom), mouvement, points de rupture max-*: du plus large au plus étroit, puis points de rupture croissants, orientation, direction, dark:, puis plateforme. La variante la plus haute d’une classe décide, puis la suivante, et une variante supplémentaire vient plus tard (dark:hover: après dark:), comme Tailwind les trie. Ainsi "active:bg-red-500 bg-blue-500" est rouge pendant l’appui.
• style l’emporte sur les classes. Le style en ligne est appliqué par-dessus les classes résolues. Une clé de style est la propriété CSS de même nom, celle que définissent les utilitaires : elle remplace donc cette propriété et rien d’autre : style={{ paddingLeft: 8 }} l’emporte sur pl-4 et conserve pr-4. Un utilitaire important (!p-4 ou p-4!) l’emporte aussi sur le style en ligne.
• Les styles de texte sont hérités. Les utilitaires de texte sur une vue (text-white, font-bold, text-center, …) se transmettent aux éléments <Text> et <Input> qu’elle contient, comme en CSS.
• Display suit CSS. flex et inline-flex produisent une ligne, sauf si un utilitaire de direction dit autre chose, où qu’il se trouve dans la chaîne (flex-col flex est une colonne). Le display: "flex" d’un style est une ligne de la même façon ; les vues qui ne définissent aucun display conservent la colonne par défaut de NSH.

#Unités et thème

Les longueurs sont en points (1 = un point sur iOS, un dp sur Android). Le 1rem de Tailwind vaut 16 points, de sorte que le thème correspond à celui du web à densité égale : un pas d’espacement vaut 4 points (p-4 = 16 points), text-base vaut 16 points.

#Valeurs d’espacement

Les utilitaires qui prennent une valeur d’espacement (padding, margin, gap, inset, largeur, hauteur, basis, translate, leading) acceptent :

Les marges, les insets, translate, rotate, skew, scale, z, hue-rotate, tracking, underline-offset, outline-offset, les lignes de grille et les angles de dégradé acceptent un - initial pour les valeurs négatives : -mt-2, -translate-x-1/2, -rotate-6. Tailwind n’a pas de forme négative pour les autres (-p-4, -gap-2, -w-4), et NSH non plus.

#Couleurs

La palette complète de Tailwind 4 est intégrée : red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, slate, gray, zinc, neutral, stone, mauve, olive, mist, taupe, chacune en nuances 50, 100–900, 950 ; plus black, white et transparent. Vos propres couleurs viennent de nsh.json (voir Personnalisation du thème).

Chaque utilitaire de couleur accepte :

currentColor et inherit ne sont pas des valeurs de couleur. Comme dans un navigateur, une bordure, un contour (outline) ou un anneau (ring) sans classe de couleur est dessiné dans la couleur de texte de l’élément, la sienne ou celle dont il hérite (<View class="text-white"><View class="border ring-2" /></View> dessine les deux en blanc), et il en va de même pour une bordure dont la prop style définit l’épaisseur sans couleur.

#Valeurs arbitraires

Les crochets transmettent une valeur que le thème ne contient pas : w-[37px], grid-cols-[200px_1fr], bg-[linear-gradient(45deg,red,blue)].

• _ représente une espace (grid-cols-[1fr_2fr]) ; écrivez \_ pour un tiret bas littéral.
• Longueurs : un nombre seul ou px (points), pt (4/3 de point, comme en CSS), rem (16 points), et % là où les pourcentages ont un sens.
• Angles (rotate-[...], hue-rotate-[...], bg-linear-[...]) : deg, rad, grad, turn.
• Durées (duration-[...], delay-[...]) : ms ou s ; un nombre seul est en millisecondes.
• Les indications de type lèvent l’ambiguïté des valeurs : text-[length:22px] est une taille, text-[color:#333] une couleur ; border-[length:3px] de même.

Les propriétés CSS arbitraires ([mask-type:luminance]) ne sont pas prises en charge.

#Mise en page

Le défilement est un élément, pas une classe : overflow-auto et overflow-scroll ne sont pas pris en charge ; utilisez scroll.

#Flexbox et grid

#Espacement

#Dimensionnement

Largeurs de conteneur (en points) : 3xs 256, 2xs 288, xs 320, sm 384, md 448, lg 512, xl 576, 2xl 672, 3xl 768, 4xl 896, 5xl 1024, 6xl 1152, 7xl 1280 ; prose vaut 65 fois la largeur du 0 de la police de l’élément (le 65ch de CSS), comme dans Tailwind CSS.

#Typographie

#Police

#Taille, couleur et interligne

text-<size> définit la taille de police et l’interligne correspondant de Tailwind, qu’une classe leading-* remplace où qu’elle se trouve dans la chaîne et quelle que soit sa variante (leading-tight md:text-lg conserve l’interligne serré) :

#Alignement, casse et retour à la ligne

#Décoration et ombre

Les ombres de texte de Tailwind comportent plusieurs couches ; en natif, une seule ombre est dessinée, la couche la plus large.

#Champs de saisie

#Arrière-plans

Les utilitaires de dégradé mélangent leurs couleurs en Oklab, comme Tailwind CSS les écrit (in oklab) ; à une position arbitraire (bg-linear-[25deg], bg-conic-[0.25turn]), ils suivent le comportement par défaut de CSS : Oklab avec les couleurs de la palette, et sRGB lorsque tous les arrêts sont des couleurs hexadécimales, rgb(), hsl() ou nommées.

view()
    .h_32()
    .rounded_2xl()
    .bg_linear_to_br()
    .gradient_from(INDIGO.shade(500))
    .gradient_via(PURPLE.shade(500))
    .gradient_via_position(percentage(0.4))
    .gradient_to(PINK.shade(500))

<View class="h-32 rounded-2xl bg-linear-to-br from-indigo-500 via-purple-500 via-40% to-pink-500" />

#Bordures

Tailles de rayon (en points) : xs 2, sm 4, md 6, lg 8, xl 12, 2xl 16, 3xl 24, 4xl 32, full 9999.

#Anneaux

Les anneaux sont des ombres de boîte avec une propagation, dessinées à l’extérieur de la bordure sans occuper d’espace.

#Effets

Les ombres, les anneaux et les ombres intérieures se combinent en une seule liste boxShadow, comme en CSS. Une couleur d’ombre remplace la couleur de chaque couche, alpha compris, comme le --tw-shadow-color de Tailwind : shadow-md shadow-red-500 donne une ombre rouge opaque, shadow-md/20 shadow-red-500 une ombre à 20 %.

#Filtres

#Transformations

Les utilitaires de transformation se composent comme en CSS : translate-*, rotate-* et scale-* définissent les propriétés translate, rotate et scale et se combinent quel que soit l’ordre, puis transform s’applique (rotate-x-*, skew-*). Les clés de même nom de la prop style ne remplacent que leur propre propriété : style={{ scale: 1.1 }} remplace scale-95 et conserve rotate-3. transform, transform-gpu, transform-cpu et transform-flat sont acceptés et sans effet : NSH compose toutes les transformations de la même façon, à plat. Les translations d’une fraction de la taille sont résolues par rapport au cadre de l’élément et le suivent lorsqu’il est redimensionné.

#Transitions et animation

Les transitions s’exécutent sur le thread d’interface lorsqu’une valeur change, y compris lorsqu’une variante commence ou cesse de correspondre ; transition active:scale-95 anime donc l’appui sans JS. Encapsulez les animations dans motion-safe: pour respecter le réglage de réduction des animations.

#Interactivité

#SVG

#Images

#Acceptés sans effet

Ces utilitaires sont des indications de rendu, ou correspondent à ce que toute vue native est déjà ; ils sont analysés sans avertissement et ne changent rien : antialiased, subpixel-antialiased, isolation-auto, box-border, appearance-none, appearance-auto, will-change-auto, will-change-scroll, will-change-contents, will-change-transform, will-change-[<value>], transform, transform-gpu, transform-cpu, transform-flat. Le défilement, l’accrochage et le défilement excédentaire sont des props de scroll.

#Non pris en charge

Les variantes peer-*, les pseudo-éléments (before:, after:), les propriétés arbitraires ([prop:value]), overflow-auto / overflow-scroll, divide-*, columns-*, float-*, container, les requêtes de conteneur, order-*, transform-3d, select-all, border-double / outline-double, les contraintes min/max intrinsèques (comme max-w-max), snap-*, scroll-*, overscroll-*, touch-* et isolate sont des classes inconnues. nsh build et nsh dev signalent par un avertissement les classes inconnues qu’ils trouvent dans votre code source (file:line:col: unknown class '...'), et le runtime journalise chaque classe inconnue une seule fois.

#Variantes

Les variantes rendent un utilitaire conditionnel : dark:bg-zinc-900, md:flex-row, active:opacity-70. Elles s’empilent (dark:active:bg-zinc-700) et sont évaluées nativement chaque fois que ce dont elles dépendent change.

#Apparence et environnement

#Points de rupture

Les points de rupture comparent la largeur de la fenêtre en points.

Un téléphone en mode portrait (390 points de large) ne correspond à aucun des points de rupture par défaut ; une tablette ou un téléphone en mode paysage en satisfait plusieurs. En Rust, un point de rupture est une condition sur la fenêtre : .style_when(move || window().width >= px(768.0), |s| s.p_8()) équivaut à md:p-8.

#États d’interaction

Les états ne sont suivis par la plateforme que pour les éléments dont les classes les utilisent, et les changements s’appliquent nativement, sans aller-retour avec JS.

Les mêmes états sous forme d’objets de style sont les props activeStyle, hoverStyle, focusStyle, disabledStyle, checkedStyle, indeterminateStyle, expandedStyle et pressedStyle de chaque élément (et le selectedStyle d’un Button) ; elles prennent le pas sur le style et les classes de l’élément.

disabled fonctionne sur n’importe quel élément : il applique disabled: et supprime les gestionnaires d’appui de l’élément, qui n’affiche donc aucun retour visuel à l’appui non plus.

view()
    .on_press(save)
    .disabled(saving)
    .rounded_lg()
    .bg(BLUE.shade(600))
    .px_4()
    .py_2()
    .transition()
    .active(|s| s.scale(0.95).bg(BLUE.shade(700)))
    .disabled_style(|s| s.opacity(0.4))
    .child(text("Save").font_weight(FontWeight::MEDIUM).text_color(white()))

<View
  onPress={save}
  disabled={saving()}
  class="rounded-lg bg-blue-600 px-4 py-2 transition active:scale-95 active:bg-blue-700 disabled:opacity-40"
>
  <Text class="font-medium text-white">Save</Text>
</View>

#Groupes

Marquez un ancêtre avec group et stylez les descendants selon son état avec group-<state>:. Nommez les groupes pour les imbriquer : group/card et group-hover/card:.

view()
    .on_press(open)
    .group_named("row")
    .flex_row()
    .items_center()
    .gap_3()
    .p_3()
    .active(|s| s.bg(ZINC.shade(100)))
    .child(
        text("Settings")
            .flex_1()
            .text_color(ZINC.shade(900))
            .group_active_named("row", |s| s.text_color(BLUE.shade(600))),
    )
    .child(
        text("›")
            .text_color(ZINC.shade(400))
            .group_active_named("row", |s| s.translate_x(px(4.0)))
            .transition_transform(),
    )

<View onPress={open} class="group/row flex-row items-center gap-3 p-3 active:bg-zinc-100">
  <Text class="flex-1 text-zinc-900 group-active/row:text-blue-600">Settings</Text>
  <Text class="text-zinc-400 group-active/row:translate-x-1 transition-transform">›</Text>
</View>

#Position parmi les éléments frères

each(items, |item: &Item| item.id, move |item, index| {
    text(move || item.with(|i| i.name.clone()))
        .border_b(px(1.0))
        .border_color(ZINC.shade(200))
        .py_3()
        .style_when(move || index.get() + 1 == items.with(Vec::len), |s| s.border_b(px(0.0)))
})

<Each of={items()}>{(item) => <Text class="border-b border-zinc-200 py-3 last:border-b-0">{item().name}</Text>}</Each>

#Placeholder et sélection

placeholder: s’applique au placeholder d’un <Input> et n’accepte qu’une couleur de texte : placeholder:text-zinc-400 (la clé de style placeholderColor). selection: s’applique à la sélection d’un <Input> ou d’un <Text> sélectionnable, et, sur n’importe quel élément, à ce qu’il contient (le & *::selection de Tailwind ; celui de l’élément le plus proche l’emporte), et accepte son arrière-plan, la surbrillance : selection:bg-violet-200 (la clé de style selectionColor, qui teinte aussi le curseur d’un champ de saisie là où la plateforme le dessine d’une seule couleur).

#Important

Placer ! avant ou après un utilitaire (!p-4, p-4!) le fait l’emporter sur toutes les autres classes et sur le style en ligne.

#Personnalisation du thème

Étendez le thème dans l’objet "tailwind" du nsh.json de votre app. Les entrées avec un nouveau nom sont ajoutées ; celles dont le nom existe déjà remplacent la valeur par défaut. Les longueurs sont en points. Le thème est vérifié lors du bundling de l’app : une clé inconnue ou une valeur invalide provoque une erreur de build.

{
  "name": "My App",
  "id": "com.example.myapp",
  "tailwind": {
    "colors": {
      "brand": { "50": "#f5f3ff", "500": "#7c3aed", "600": "#6d28d9", "DEFAULT": "#7c3aed" },
      "accent": "#f59e0b"
    },
    "spacing": 4,
    "breakpoints": { "tablet": 600 },
    "fontFamily": { "display": "Inter" },
    "fontSize": { "huge": [48, 1.1] },
    "fontWeight": { "heavy": 850 },
    "radius": { "card": 14 },
    "shadow": { "card": "0 2px 8px rgb(0 0 0 / 0.12)" },
    "insetShadow": { "well": "inset 0 2px 6px rgb(0 0 0 / 0.1)" },
    "dropShadow": { "icon": "0 2px 4px rgb(0 0 0 / 0.2)" },
    "tracking": { "label": 0.08 },
    "leading": { "dense": 1.15 },
    "blur": { "glass": 20 },
    "perspective": { "card": 700 },
    "aspect": { "photo": 1.5 },
    "ease": { "snappy": [0.2, 0, 0, 1] },
    "container": { "content": 680 }
  }
}

Avec ce thème, bg-brand-500, bg-brand (la teinte DEFAULT), text-accent, tablet:flex-row, font-display, text-huge, font-heavy, rounded-card, shadow-card, inset-shadow-well, drop-shadow-icon, tracking-label, leading-dense, blur-glass, perspective-card, aspect-photo, ease-snappy et max-w-content fonctionnent tous.

#Voir aussi

• Tailwind : le guide.
• Mise en forme : class, classList, style et comment ils se combinent.
• Référence des styles : les clés de style que définissent les utilitaires.