TailwindCSS MCP server, gives your AI access to your actual Tailwind config
Visit WebsiteFreeVisit Website
TL;DR - TailwindCSS MCP
- Your AI knows your exact Tailwind config, theme, plugins, utilities
- Eliminates hallucinated class names and wrong colors
- Works with any Tailwind v3/v4 project
Pricing: Free forever
Best for: Individuals & startups
Pros & Cons
Pros
- AI uses your actual classes, not generic Tailwind defaults
- Zero config, reads your tailwind.config.js
Cons
- Only useful for Tailwind projects
- Does not preview rendered output
Key Features
Theme configuration accessCustom utility detectionPlugin awarenessColor palette and breakpoint export
Pricing Plans
Open Source
Free
- Full source code access
- Community support
- Self-hosted
What is TailwindCSS MCP?
TailwindCSS MCP provides your AI assistant with your actual Tailwind configuration, theme, plugins, custom utilities, colors, breakpoints. No more hallucinated class names.
Reviews
Be the first to review TailwindCSS MCP
Your take helps the next buyer. Verified LinkedIn reviewers get a badge.
Write a reviewExplore More
TailwindCSS MCP FAQ
What does TailwindCSS MCP do?
TailwindCSS MCP gives AI agents access to your Tailwind configuration and documentation. Agents can look up utility classes, check your custom theme values (colors, spacing, fonts), and generate Tailwind-compliant code that matches your project settings.
Why do AI agents need TailwindCSS MCP?
AI models are trained on older Tailwind versions and often generate deprecated or incorrect classes. TailwindCSS MCP provides the agent with your actual Tailwind config and current docs, so generated code matches your project's version and customizations.
Is TailwindCSS MCP free?
Yes, completely free and open source. It is maintained by the Tailwind Labs team. No API keys or accounts are needed.
Does TailwindCSS MCP read my tailwind.config.js?
Yes. It parses your project's Tailwind configuration and exposes custom theme values, plugins, and content paths to the AI agent. This ensures generated code uses your custom color palette, breakpoints, and spacing scale.
How do I install TailwindCSS MCP?
Add
npx @anthropic-ai/tailwindcss-mcp to your MCP client config. Point it at your project directory so it can find your tailwind.config.js or tailwind.config.ts. It works with Tailwind CSS v3 and v4.Source: npmjs.com