Mandu Styling

Apply Tailwind CSS v4 theming across Mandu Island components.

46|4|Updated Jan 21, 2026
One-click install
npx skills add https://github.com/konamgil/mandu --skill mandu-styling
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Mandu Styling
Source: https://github.com/konamgil/mandu/tree/main/packages/mcp/src/resources/skills/mandu-styling
Command: npx skills add https://github.com/konamgil/mandu --skill mandu-styling

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Mandu Styling provides a cohesive approach to applying Tailwind CSS v4 across Mandu Island projects, removing inconsistent styling handoffs and bridging CSS-first theming with component islands.

Core Features & Use Cases

  • Tailwind v4 integration with Mandu Island patterns for isolated, zero-runtime styling.
  • CSS-first theming using the @theme block and design tokens for consistent theming across pages and components.
  • Auto integration and HMR that wire Mandu's styling to SSR and client islands with instant feedback.
  • Useful for large Mandu apps needing scalable, predictable UI surfaces and reduced runtime CSS churn.

Quick Start

Install Mandu Styling in your project and start Mandu dev to observe Tailwind-driven island styling across your app.

Frequently Asked Questions about Mandu Styling

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I apply Tailwind CSS v4 to Mandu Island components for consistent theming?

You can apply Tailwind CSS v4 to Mandu Island components by using the @theme block in CSS for CSS-first theming, ensuring isolated, zero-runtime styling across all component islands.

How does CSS-first theming work with Mandu Islands and Tailwind v4?

CSS-first theming with Mandu Islands uses the Tailwind v4 @theme block to define design tokens directly in CSS, providing consistent theming across pages and components without runtime overhead.

Do I need Tailwind CSS v4 to use Mandu auto-build and HMR for styling?

Yes, Tailwind CSS v4 is required. Mandu auto-build with HMR relies on the @theme block and Tailwind v4 to wire styling to SSR and client islands while ensuring zero-runtime CSS generation.

What is the best way to scale UI theming across large multi-island Mandu applications?

The best way to scale UI theming across large multi-island Mandu applications is standardizing Tailwind v4 integration to enforce predictable design tokens, consistent theming, and reduced runtime CSS churn.

Why does Mandu Styling require zero-runtime CSS for multi-island apps?

Mandu Styling requires zero-runtime CSS to eliminate runtime style churn and ensure predictable UI surfaces. It bridges CSS-first theming with component islands using Tailwind v4 and Mandu auto-build.

Can I use CSS-first design tokens with Mandu Island patterns to isolate component styles?

Yes, you can use CSS-first design tokens via the Tailwind v4 @theme block to isolate component styles within Mandu Island patterns, ensuring consistent theming and predictable styling across all islands.