# Tailwind CSS

> Cómo usa larch Tailwind CSS: las interfaces de la app web de Hiki, la app de escritorio Bridddge y el panel de Scout, con componentes de shadcn/ui y Radix.

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

larch construye interfaces con Tailwind CSS. La app web de Hiki, la app de escritorio Bridddge y el panel de Scout tienen sus estilos hechos con las utilidades de Tailwind, con componentes de shadcn/ui o Radix encima.

- Productos hechos: 3
- Versiones: Tailwind 3 y 4
- Componentes: shadcn/ui · Radix
- Plataformas: Web · macOS
- shadcn/ui en Hiki: 16 componentes

## Hecho con Tailwind CSS

Tres productos, una capa de estilos. Todos nuestros productos con interfaz usan Tailwind para los estilos. seo-mcp es la excepción: no tiene interfaz propia y funciona dentro de tu editor de IA.

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

La app web de Hiki usa Tailwind 4 con 16 componentes de shadcn/ui, con un tema neobrutalista llamativo en el catálogo, la compraventa y el mapa de tiendas.

- Año: 2025
- Stack: Next.js, React, TypeScript, Tailwind CSS, Kotlin, Jetpack Compose, FastAPI, Python, MongoDB, Firebase, Google Cloud
- Producto en línea: https://hiki.world

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

La app de escritorio Bridddge usa Tailwind 3 con shadcn/ui, configurado con esquinas rectas y un acento azul para que los componentes parezcan de Bridddge.

- Año: 2025
- Stack: Electron, React, TypeScript, shadcn/ui, Tailwind CSS, SQLite, Firebase, MCP, Claude AI
- Producto en línea: https://bridddge.com

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

El panel de Scout, con su pipeline Kanban en directo y su registro de actividad, está hecho con Tailwind 4.1 y primitivas de Radix.

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

## Servicio relacionado

### [Desarrollo de plataformas web](https://larch.ee/es/services/web-platform-development/)

Plataformas rápidas y resilientes que crecen con tu negocio, no en su contra.

Qué recibes:

- **Plataformas SaaS, paneles en tiempo real y apps multilingües**: El panel en directo de Scout y el catálogo multilingüe de Hiki, cada uno con su propio aspecto, a partir de las mismas clases de utilidad.
- **Todo el stack, del front end a la base de datos**: En Hiki, el front end con Tailwind se apoya en un back end en FastAPI y MongoDB, todo construido por un solo equipo.
- **Desplegadas, monitorizadas y escaladas, no solo construidas**: La app web de Hiki se despliega en Cloud Run con Cloud Build en cada push a main.

## Cómo usamos Tailwind CSS

Un aspecto por producto. Tailwind da a cada producto su propio aspecto a partir de un mismo conjunto de piezas, y mantiene los estilos junto a los componentes que los usan.

### Hiki: un aspecto manga sobre Tailwind 4

La app web de Hiki funciona con Next.js 16 y Tailwind 4. Encima hay 16 componentes de shadcn/ui con un tema neobrutalista: bordes gruesos, sombras desplazadas y un aire inspirado en el manga que recorre el catálogo, la compraventa y el mapa de tiendas. Los componentes viven en el proyecto y no en un paquete, así que el equipo los cambia como cualquier otro código.

### Bridddge: una app de escritorio con identidad propia

Bridddge es una app de Electron para macOS, con estilos de Tailwind 3 y shadcn/ui. Su tema pone el radio de las esquinas a cero y usa un acento azul, así que los mismos componentes se ven como Bridddge y no como un kit estándar. El plugin tailwindcss-animate añade las pequeñas animaciones.

### Scout: un panel que muestra mucho a la vez

La interfaz de Scout es Next.js 15 con Tailwind 4.1, y las primitivas de Radix le dan piezas accesibles. Mete mucho en pantalla: un asistente de configuración de siete pasos, un pipeline Kanban de arrastrar y soltar, un panel de analítica y un registro en directo de cada acción del agente.

### Por qué Tailwind

Los estilos están en el marcado, junto al componente al que pertenecen, así que no queda nada suelto cuando un componente desaparece. Al navegador solo llegan las clases que usa cada producto, y un tema nuevo son unos pocos tokens, no una reescritura. Así es como tres productos muy distintos siguen siendo rápidos de cambiar. Este sitio, larch.ee, también usa Tailwind 4.

## Otras tecnologías

Se usan junto a ella. Los tres productos combinan Tailwind con React, y Hiki y Scout también con Next.js. Mira qué más hemos construido con ellos.

- [React](https://larch.ee/es/technologies/react/): Las interfaces de Hiki y Scout, y de la app de escritorio Bridddge.
- [Next.js](https://larch.ee/es/technologies/nextjs/): El front end del catálogo multilingüe de Hiki y la app web de Scout, ambos con el App Router de Next.js.
- [Todas las tecnologías](https://larch.ee/es/technologies/): Once tecnologías, cada una funcionando en un producto que hemos lanzado.

## Cómo empezar

Cuéntanos qué quieres lanzar. Trae la idea. Te diremos cómo la construiríamos y qué hace falta.

- Reservar una llamada de 30 minutos: https://calendly.com/nicholas-stackwise/30min
- Correo electrónico: nicholas@larch.ee