# Tailwind CSS

> Comment larch utilise Tailwind CSS : les interfaces de l’app web de Hiki, de l’app de bureau Bridddge et du tableau de bord de Scout, avec shadcn/ui et Radix.

URL: https://larch.ee/fr/technologies/tailwind-css/

larch construit des interfaces avec Tailwind CSS. L’application web de Hiki, l’application de bureau Bridddge et le tableau de bord de Scout sont tous stylés avec les utilitaires Tailwind, avec des composants shadcn/ui ou Radix par-dessus.

- Produits réalisés: 3
- Versions: Tailwind 3 et 4
- Composants: shadcn/ui · Radix
- Plateformes: Web · macOS
- shadcn/ui dans Hiki: 16 composants

## Réalisé avec Tailwind CSS

Trois produits, une couche de style. Chacun de nos produits qui a une interface est stylé avec Tailwind. seo-mcp est l’exception : il n’a pas d’interface propre et tourne dans votre éditeur IA.

### [Hiki](https://larch.ee/fr/work/hiki/)

L’application web de Hiki utilise Tailwind 4 avec 16 composants shadcn/ui, dans un style néo-brutaliste affirmé, sur le catalogue, la marketplace et la carte des magasins.

- Année: 2025
- Stack: Next.js, React, TypeScript, Tailwind CSS, Kotlin, Jetpack Compose, FastAPI, Python, MongoDB, Firebase, Google Cloud
- Produit en ligne: https://hiki.world

### [Bridddge](https://larch.ee/fr/work/bridddge/)

L’application de bureau Bridddge utilise Tailwind 3 avec shadcn/ui, réglé sur des angles droits et un accent bleu pour que les composants ressemblent à Bridddge.

- Année: 2025
- Stack: Electron, React, TypeScript, shadcn/ui, Tailwind CSS, SQLite, Firebase, MCP, Claude AI
- Produit en ligne: https://bridddge.com

### [Scout](https://larch.ee/fr/work/scout/)

Le tableau de bord de Scout, avec son pipeline Kanban en direct et son journal d’activité, est construit avec Tailwind 4.1 et des primitives Radix.

- Année: 2025
- Stack: Next.js, React, TypeScript, Tailwind CSS, SQLite, Playwright, AI agents, Gemini API

## Service associé

### [Développement de plateformes web](https://larch.ee/fr/services/web-platform-development/)

Des plateformes rapides et robustes qui grandissent avec votre activité, pas contre elle.

Vous obtenez:

- **Plateformes SaaS, tableaux de bord en temps réel et applications multilingues**: Le tableau de bord en direct de Scout et le catalogue multilingue de Hiki, chacun avec son propre look, à partir des mêmes classes utilitaires.
- **Toute la stack, du front-end à la base de données**: Pour Hiki, le front-end Tailwind repose sur un back-end FastAPI et MongoDB, le tout construit par une seule équipe.
- **Déployées, surveillées et mises à l’échelle, pas seulement construites**: L’application web de Hiki est déployée sur Cloud Run via Cloud Build à chaque push sur main.

## Tailwind CSS : notre usage

Un look par produit. Tailwind donne à chaque produit son propre look à partir d’un seul jeu de briques, et garde les styles à côté des composants qui les utilisent.

### Hiki : un look manga sur Tailwind 4

L’application web de Hiki tourne sur Next.js 16 avec Tailwind 4. Par-dessus, 16 composants shadcn/ui adoptent un style néo-brutaliste : bordures épaisses, ombres décalées et un look inspiré du manga qui se retrouve dans le catalogue, la marketplace et la carte des magasins. Les composants vivent dans le projet plutôt que dans un package, donc l’équipe les modifie comme n’importe quel autre code.

### Bridddge : une application de bureau avec sa propre identité

Bridddge est une application Electron pour macOS, stylée avec Tailwind 3 et shadcn/ui. Son thème met le rayon des angles à zéro et utilise un accent bleu : les mêmes composants se lisent comme Bridddge plutôt que comme un kit standard. Le plugin tailwindcss-animate ajoute les petites animations.

### Scout : un tableau de bord qui montre beaucoup à la fois

L’interface de Scout est en Next.js 15 avec Tailwind 4.1, et les primitives Radix lui donnent des briques accessibles. Elle met beaucoup à l’écran : un assistant de configuration en sept étapes, un pipeline Kanban en glisser-déposer, un tableau de bord analytique et un journal en direct de chaque action de l’agent.

### Pourquoi Tailwind

Les styles sont dans le balisage, à côté du composant auquel ils appartiennent : rien ne reste quand un composant disparaît. Seules les classes qu’un produit utilise arrivent dans le navigateur, et un nouveau thème tient en quelques tokens plutôt qu’en une réécriture. C’est ainsi que trois produits très différents restent rapides à faire évoluer. Ce site, larch.ee, est lui aussi stylé avec Tailwind 4.

## Autres technologies

Utilisées en complément. Les trois produits associent Tailwind à React, et Hiki et Scout à Next.js. Découvrez ce que nous avons construit d’autre avec.

- [React](https://larch.ee/fr/technologies/react/): Les interfaces de Hiki et de Scout, et celle de l’application de bureau Bridddge.
- [Next.js](https://larch.ee/fr/technologies/nextjs/): Le front-end du catalogue multilingue de Hiki et l’application web de Scout, tous deux sur l’App Router de Next.js.
- [Toutes les technologies](https://larch.ee/fr/technologies/): Onze technologies, chacune en service dans un produit que nous avons lancé.

## Pour commencer

Dites-nous ce que vous voulez lancer. Apportez l’idée. Nous vous dirons comment nous la construirions et ce que cela demande.

- Réserver un appel de 30 minutes: https://calendly.com/nicholas-stackwise/30min
- E-mail: nicholas@larch.ee