# Tailwind CSS

> How larch uses Tailwind CSS: the interfaces of Hiki’s web app, the Bridddge desktop app and Scout’s dashboard, with shadcn/ui and Radix components.

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

larch builds interfaces with Tailwind CSS. Hiki’s web app, the Bridddge desktop app and Scout’s dashboard are all styled with Tailwind utilities, with shadcn/ui or Radix components on top.

- Products built: 3
- Versions: Tailwind 3 and 4
- Components: shadcn/ui · Radix
- Platforms: Web · macOS
- shadcn/ui in Hiki: 16 components

## Built with Tailwind CSS

Three products, one styling layer. Every product of ours with an interface is styled with Tailwind. seo-mcp is the exception: it has no interface of its own and runs inside your AI editor.

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

Hiki’s web app uses Tailwind 4 with 16 shadcn/ui components, themed in a bold Neubrutalism style across the catalog, the marketplace and the store map.

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

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

The Bridddge desktop app uses Tailwind 3 with shadcn/ui, set to square corners and a blue accent so the components look like Bridddge.

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

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

Scout’s dashboard, with its live Kanban pipeline and activity log, is built with Tailwind 4.1 and Radix primitives.

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

## Related service

### [Web platform development](https://larch.ee/services/web-platform-development/)

Fast, resilient platforms that grow with your business, not against it.

What you get:

- **SaaS platforms, real-time dashboards and multilingual apps**: Scout’s live dashboard and Hiki’s multilingual catalog, each with its own look, from the same utility classes.
- **The entire stack, from front end to database**: On Hiki, the Tailwind front end sits on a FastAPI back end and MongoDB, all built by one team.
- **Deployed, monitored and scaled, not just built**: Hiki’s web app ships to Cloud Run through Cloud Build on every push to main.

## How we use Tailwind CSS

One look per product. Tailwind gives each product its own look from one set of building blocks, and keeps the styles next to the components that use them.

### Hiki: a manga look on Tailwind 4

Hiki’s web app runs on Next.js 16 with Tailwind 4. On top sit 16 shadcn/ui components, themed in a Neubrutalism style: bold borders, offset shadows and a manga-inspired look that carries across the catalog, the marketplace and the store map. The components live in the project rather than in a package, so the team changes them like any other code.

### Bridddge: a desktop app with its own identity

Bridddge is an Electron app for macOS, styled with Tailwind 3 and shadcn/ui. Its theme sets the corner radius to zero and uses a blue accent, so the same components read as Bridddge rather than as a stock kit. The tailwindcss-animate plugin adds the small animations.

### Scout: a dashboard that shows a lot at once

Scout’s interface is Next.js 15 with Tailwind 4.1, and Radix primitives give it accessible building blocks. It packs a lot onto the screen: a seven-step setup wizard, a drag-and-drop Kanban pipeline, an analytics dashboard and a live log of every action the agent takes.

### Why Tailwind

The styles sit in the markup, next to the component they belong to, so nothing is left over when a component goes. Only the classes a product uses reach the browser, and a new theme is a handful of tokens rather than a rewrite. That is how three very different products stay quick to change. This site, larch.ee, is styled with Tailwind 4 too.

## Other technologies

Used alongside it. All three products pair Tailwind with React, and Hiki and Scout with Next.js. See what else we built with them.

- [React](https://larch.ee/technologies/react/): The interfaces of Hiki and Scout, and of the Bridddge desktop app.
- [Next.js](https://larch.ee/technologies/nextjs/): Hiki’s multilingual catalog front end and the Scout web app, both on the Next.js App Router.
- [All technologies](https://larch.ee/technologies/): Eleven technologies, each one running in a product we shipped.

## How to start

Tell us what you want to ship. Bring the idea. We’ll tell you how we’d build it and what it takes.

- Book a 30-minute call: https://calendly.com/nicholas-stackwise/30min
- Email: nicholas@larch.ee