Generate a Tailwind config from CSS tokens detected in a project, or read an existing config for inspection. Use to bootstrap or review Tailwind setup.
MIT
725,569 tools. Updated 2026-10-30 17:11
"Tailwind CSS" matching MCP tools:
- Converts any CSS color into Tailwind-formatted oklch(), hex, and rgb values, mapping each into its correct gamut. Use for a single color; call generate_palette to build full shades.MIT
- Generates a full Tailwind CSS palette (50-950) from one color, ready to paste. Call it whenever you add a color to a Tailwind theme (e.g. "add a brand color #db4d53"), instead of writing a single variable or inventing shades.MIT
- Extract design tokens from CSS, SCSS, or Tailwind config to inventory a project's visual styles before creating a Tailwind config or component scaffold. Optionally fetch tokens from Figma.MIT
- Generate a complete project boilerplate with ML-composed pages for React, Next.js, Vue, Angular, Svelte, or HTML with Tailwind CSS and optional state management.MIT
- Extract design tokens from Figma files and map to Tailwind CSS utilities, updating the shared design context.MIT
Matching MCP Servers
- AlicenseAqualityDmaintenanceLoads your project's Tailwind CSS config and exposes tools for AI agents to query actual design tokens and validate class names, preventing hallucination of non-existent utilities.719 npmMIT
- FlicenseBqualityDmaintenanceFinds the closest Tailwind CSS palette colors to any given CSS color value. Supports multiple color spaces and customizable result filtering to help match designs to Tailwind's color system.1-
Matching MCP Connectors
- Tailwind AppOAuth
Tailwind MCP server — list Pinterest accounts and create, schedule, and manage Pinterest posts.
What CSS you can actually ship today, from live Baseline data and MDN browser-compat-data.
- Compose multi-layer CSS box-shadow declarations with per-layer offset, blur, spread, color, opacity, and inset settings. Includes HTML preview and CSS, SCSS, Tailwind snippets.MIT
- Convert an existing design system from CSS, DTCG JSON, or theme objects into CSS, Tailwind, SwiftUI, Compose, or DTCG. Audits semantic roles and WCAG contrast to reveal what’s missing or undefined.MIT
- Validate Tailwind CSS class strings against your project's actual config to catch hallucinated design tokens before writing code. Returns valid, invalid, and uncertain classes with conflict warnings.MIT
- Export design tokens as CSS custom properties, Tailwind config, or Figma Variables JSON, with optional file output.MIT
- Export design tokens from active UI presets to CSS, JavaScript, JSON, or Tailwind formats for consistent styling across projects.MIT
- Create a complete brand kit with color palettes, typography pairings, and design tokens from company details and aesthetic preferences. Outputs in JSON, CSS, or Tailwind formats with WCAG accessibility scoring.MIT
- Create a light-to-dark color ramp from any CSS color, including OKLCH values and WCAG contrast ratios per step. Optionally output as Tailwind JSON or CSS custom properties.MIT
- Generate responsive breakpoint systems with named breakpoints, container max-widths, and CSS media queries. Supports Tailwind, Bootstrap, Material, or custom presets with mobile-first or desktop-first strategies.MIT
- Exports the compiled brand system into portable native formats for AI chats, code editors, team guidelines, CSS, Tailwind, and PDFs. Use after compiling to share or embed a consistent brand wherever needed.MIT
- Select the CSS framework for class generation. Options: Tailwind, Bootstrap, UnoCSS, Tachyons.MIT
- Export a colour palette to CSS custom properties, Figma tokens, Tailwind config, ASE hex list, or JSON. Colours are automatically named from the archive.MIT
- Extracts design tokens defined in @theme blocks from a Tailwind v4 CSS file, returning a flat map of CSS custom properties for use in queries.MIT
- Get the default tailwind-variants style definition for any HeroUI v2 component to see slot, variant, and color CSS classes. Use this to write custom classNames or build a custom theme.MIT
- Generate a complete typography system from chosen fonts and a modular scale, outputting CSS variables, Tailwind config, or Google Fonts embed code for consistent web typography.MIT
- Produce CSS variables, Tailwind config, Figma tokens, citation cards, and a Markdown brand guide from a color palette for brand teams.MIT