# Tailwind CSS

> Wie larch Tailwind CSS einsetzt: die Oberflächen der Web-App von Hiki, der Desktop-App Bridddge und des Scout-Dashboards, mit shadcn/ui- und Radix-Komponenten.

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

larch baut Oberflächen mit Tailwind CSS. Die Web-App von Hiki, die Desktop-App Bridddge und das Dashboard von Scout sind alle mit Tailwind-Utilities gestaltet, darüber liegen shadcn/ui- oder Radix-Komponenten.

- Gebaute Produkte: 3
- Versionen: Tailwind 3 und 4
- Komponenten: shadcn/ui · Radix
- Plattformen: Web · macOS
- shadcn/ui in Hiki: 16 Komponenten

## Gebaut mit Tailwind CSS

Drei Produkte, eine Styling-Schicht. Jedes unserer Produkte mit einer Oberfläche ist mit Tailwind gestaltet. Die Ausnahme ist seo-mcp: Es hat keine eigene Oberfläche und läuft in Ihrem KI-Editor.

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

Die Web-App von Hiki nutzt Tailwind 4 mit 16 shadcn/ui-Komponenten, gestaltet im kräftigen Neubrutalism-Stil, im Katalog, im Marktplatz und auf der Ladenkarte.

- Jahr: 2025
- Stack: Next.js, React, TypeScript, Tailwind CSS, Kotlin, Jetpack Compose, FastAPI, Python, MongoDB, Firebase, Google Cloud
- Live-Produkt: https://hiki.world

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

Die Desktop-App Bridddge nutzt Tailwind 3 mit shadcn/ui, eingestellt auf eckige Ecken und einen blauen Akzent, sodass die Komponenten nach Bridddge aussehen.

- Jahr: 2025
- Stack: Electron, React, TypeScript, shadcn/ui, Tailwind CSS, SQLite, Firebase, MCP, Claude AI
- Live-Produkt: https://bridddge.com

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

Das Dashboard von Scout mit seiner Live-Kanban-Pipeline und dem Aktivitätsprotokoll ist mit Tailwind 4.1 und Radix-Primitives gebaut.

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

## Passende Leistung

### [Entwicklung von Webplattformen](https://larch.ee/de/services/web-platform-development/)

Schnelle, belastbare Plattformen, die mit Ihrem Unternehmen wachsen, statt es zu bremsen.

Was Sie bekommen:

- **SaaS-Plattformen, Echtzeit-Dashboards und mehrsprachige Apps**: Das Live-Dashboard von Scout und der mehrsprachige Katalog von Hiki, jedes mit eigenem Look, aus denselben Utility-Klassen.
- **Der gesamte Stack, vom Frontend bis zur Datenbank**: Bei Hiki sitzt das Tailwind-Frontend auf einem FastAPI-Backend und MongoDB, alles von einem Team gebaut.
- **Deployt, überwacht und skaliert, nicht nur gebaut**: Die Web-App von Hiki geht bei jedem Push auf main über Cloud Build auf Cloud Run.

## So nutzen wir Tailwind CSS

Ein Look pro Produkt. Tailwind gibt jedem Produkt seinen eigenen Look aus einem einzigen Satz Bausteine und hält die Styles direkt bei den Komponenten, die sie nutzen.

### Hiki: ein Manga-Look auf Tailwind 4

Die Web-App von Hiki läuft auf Next.js 16 mit Tailwind 4. Darauf sitzen 16 shadcn/ui-Komponenten im Neubrutalism-Stil: kräftige Rahmen, versetzte Schatten und ein von Manga inspirierter Look, der sich durch den Katalog, den Marktplatz und die Ladenkarte zieht. Die Komponenten liegen im Projekt statt in einem Paket, sodass das Team sie wie jeden anderen Code ändert.

### Bridddge: eine Desktop-App mit eigener Identität

Bridddge ist eine Electron-App für macOS, gestaltet mit Tailwind 3 und shadcn/ui. Ihr Theme setzt den Eckenradius auf null und nutzt einen blauen Akzent, sodass dieselben Komponenten nach Bridddge aussehen statt nach einem Standard-Kit. Das Plugin tailwindcss-animate sorgt für die kleinen Animationen.

### Scout: ein Dashboard, das viel auf einmal zeigt

Die Oberfläche von Scout ist Next.js 15 mit Tailwind 4.1, und Radix-Primitives liefern barrierefreie Bausteine. Sie bringt viel auf den Bildschirm: einen Setup-Assistenten mit sieben Schritten, eine Kanban-Pipeline per Drag-and-drop, ein Analytics-Dashboard und ein Live-Protokoll jeder Aktion des Agenten.

### Warum Tailwind

Die Styles stehen im Markup, direkt bei der Komponente, zu der sie gehören, sodass nichts übrig bleibt, wenn eine Komponente wegfällt. Nur die Klassen, die ein Produkt nutzt, landen im Browser, und ein neues Theme ist eine Handvoll Tokens statt eines Neuschreibens. So lassen sich drei sehr unterschiedliche Produkte schnell ändern. Auch diese Website, larch.ee, ist mit Tailwind 4 gestaltet.

## Weitere Technologien

Damit kombiniert. Alle drei Produkte kombinieren Tailwind mit React, Hiki und Scout außerdem mit Next.js. Sehen Sie, was wir sonst noch damit gebaut haben.

- [React](https://larch.ee/de/technologies/react/): Die Oberflächen von Hiki und Scout und der Desktop-App Bridddge.
- [Next.js](https://larch.ee/de/technologies/nextjs/): Das Frontend des mehrsprachigen Katalogs von Hiki und die Web-App von Scout, beide auf dem App Router von Next.js.
- [Alle Technologien](https://larch.ee/de/technologies/): Elf Technologien, jede davon läuft in einem Produkt, das wir ausgeliefert haben.

## So starten Sie

Was möchten Sie ausliefern? Bringen Sie die Idee mit. Wir sagen Ihnen, wie wir sie bauen würden und was es dafür braucht.

- 30-Minuten-Gespräch buchen: https://calendly.com/nicholas-stackwise/30min
- E-Mail: nicholas@larch.ee