Tailwind v4 natif · Rust pur

Tailwind, généré par Rust.

Chaque élément de cette page est stylisé par bext-css, un générateur Tailwind natif Rust construit sur encre-css. Pas de PostCSS, pas de bundle Bun, pas de watcher — bext-server analyse le HTML rendu par SSR et injecte <style data-bext-css> dans <head>.

Voir en direct ↓Fonctionnement

Composants en direct

Rendu côté serveur. Consultez le source — chaque élément stylisé ci-dessous provient d'une classe utilitaire Tailwind. (chargement des octets…)

Astuce
Le scan de classes s'effectue après le rendu SSR par balayage d'octets — bext ne parse pas le DOM. Cela signifie que les classes construites dynamiquement (ex. `bg-${color}-500`) ne sont pas détectées : écrivez toujours les noms de classe complets dans le JSX pour qu'ils soient inclus dans la feuille de style générée.
Sites

25

↑ 3 cette semaine

Requêtes / min

1,284

stable

Edge p99

42 ms

5 dernières min

Boutons

opérationnel

Palette de couleurs bext (defined in crates/bext-css/src/lib.rs)

bext-accent-2

#10b981

bext-cloud

#8b5cf6

bext-companion

#6366f1

bext-info

#3b82f6

bext-warning

#f59e0b

bext-error

#ef4444

bext-success

#10b981

bext-black

#0a0a0a

Info

bg-bext-info, text-blue-900 — les utilitaires et les tokens bext-* se composent de la même façon.

Note CPU

Les sites sans route_css = true ignorent totalement le scan — aucune surcharge.

Pas d'étape de build

Ni PostCSS, ni CLI tailwindcss, ni tailwind.config.js.

Attention

Le preflight de Tailwind réinitialise h1, etc. Stylisez votre mise en page avec des utilitaires ou des sélecteurs de classe délimités.

Contrôles de formulaire

Domaines

  • demo.bext.devactif
  • cloud.bext.devopt-in
  • docs.bext.devignoré

CSS généré pour cette page

Extrait de document.querySelector('style[data-bext-css]') au chargement de la page. Contient exactement les utilitaires utilisés ci-dessus — rien d'autre.

(ouvrez cette page dans un navigateur pour voir la feuille de style intégrée)

Fonctionnement

1

Activer via toml

[build.css] route_css = true dans bext.config.toml. Mis en cache par site au démarrage.

2

Analyser le HTML SSR

Après le rendu de la page, bext-server parcourt le corps et extrait chaque token class="…" par balayage d'octets.

3

Injecter la feuille de style

encre-css génère le CSS minimal, et nous injectons <style data-bext-css> juste après <head>.

bext.config.toml

# bext.config.toml
[build.css]
route_css = true       # opt this site into per-route Tailwind injection

Source de la page (cette page)

src/app/examples/tailwind/page.tsxTSX
// Just write Tailwind utility classes — the Rust route-css pipeline
// scans the rendered HTML and inlines a <style data-bext-css> block
// into <head>. No build step, no PostCSS, no tailwind.config.js.

export default function Page() {
  return (
    <div class="rounded-2xl bg-gradient-to-br from-bext-cloud to-bext-companion p-8 text-white shadow-lg">
      <h1 class="text-4xl font-bold tracking-tight">Hello, Tailwind</h1>
      <p class="mt-2 text-white/80">
        Generated by Rust at SSR time. No Node, no PostCSS.
      </p>
      <button class="mt-4 rounded-lg bg-white/10 hover:bg-white/20
                     px-4 py-2 font-medium transition-colors">
        Click me
      </button>
    </div>
  );
}

crates/bext-css/src/lib.rs

// crates/bext-css/src/lib.rs

pub fn inject_route_css_if_enabled(site_root: &Path, html: String) -> String {
    if route_css_enabled(site_root) {   // cached per-site toml lookup
        inject_route_css(html)          // scan classes → encre-css → inline
    } else {
        html                            // zero CPU for non-Tailwind sites
    }
}
Essayez en directOuvrir dans play

Un projet exécutable de cet exemple, ouvert dans l'éditeur bext play — modifiez le code, l'aperçu se met à jour.

src/app/page.tsx2 fichiers · s'exécute dans votre navigateur
Modifiable en direct — l'aperçu se recompile à chaque frappe.

Documentation associée

TailwindMoteur CSS Rust