AI Plugin IndexCSS framework
Tailwind CSS MCP servers and skills
There are 77 ways to connect Tailwind CSS to Claude, ChatGPT, Cursor and other AI assistants: 6 MCP servers and 71 skills. The most used is Tailwind Shades (78 GitHub stars).
Best Tailwind CSS MCP servers, compared →Most used
Tailwind Shadesbourhaouta
77Tailwind CSS palettes (50-950) from any color, the closest Tailwind color, and Tailwind's defaults
AAB
example-tailwind-animationBintzGavin
68Learn how to use Tailwind CSS with Helios. Use for styling compositions and animating with utility classes.
AAB
tailwindcsspedronauck
63Style components with Tailwind CSS v4 and project tokens. Excludes plain CSS, CSS-in-JS, and other utility frameworks.
BFA
olore-tailwindcss-latestolorehq
62Local tailwindcss documentation reference (latest). Tailwind CSS documentation. Use for utility-first CSS, responsive design, dark mode, custom themes, plugins, and configuration.
AAB
Tailwindcss MCP Server
CarbonoDev
59MCP server for TailwindCSS utility classes, documentation, and project assistance
FAC
tailwindre-cinq
55Tailwind CSS — utility-first styling, responsive design, component patterns
BAC
MCP servers (6)
- 1Tailwind Shades bourhaouta · DesignTailwind CSS palettes (50-950) from any color, the closest Tailwind color, and Tailwind's defaults77
- 2Tailwindcss MCP Server CarbonoDevMCP server for TailwindCSS utility classes, documentation, and project assistance59
- 3Tailwindcss Docs MCP vitalis · DesignLocal semantic search for Tailwind CSS documentation via Model Context Protocol54
- 4tailwind-v4-upgrade-blocker-lint jmshinhwa · Design19 rules that find the Tailwind v3 syntax Tailwind v4 removed or silently redefined, in the file you35
- 5tailwind-context-resolver-mcp vola-trebla · DesignResolves Tailwind CSS design tokens and validates utility classes against the local project config.24
- 6Tailwind App tailwind · DesignTailwind MCP server — list Pinterest accounts and create, schedule, and manage Pinterest posts.16
Skills (71)
- 1example-tailwind-animation BintzGavin · DesignLearn how to use Tailwind CSS with Helios. Use for styling compositions and animating with utility classes.68
- 2tailwindcss pedronauck · DesignStyle components with Tailwind CSS v4 and project tokens. Excludes plain CSS, CSS-in-JS, and other utility frameworks.63
- 3olore-tailwindcss-latest olorehq · DesignLocal tailwindcss documentation reference (latest). Tailwind CSS documentation. Use for utility-first CSS, responsive design, dark mode, custom themes, plugins, and configuration.62
- 4tailwind re-cinq · DesignTailwind CSS — utility-first styling, responsive design, component patterns55
- 5tailwind-design-tokens TheGoat395 · DesignMap semantic tokens into Tailwind utilities.55
- 6tailwind-css afonsoft · DesignRegenera o CSS Tailwind v4 do cliente Blazor. Use quando classes utilitárias forem alteradas em .razor ou em tailwind.input.css. Do NOT use para editar wwwroot/css/tailwind.css manualmente — ele é artefato gerado.42
- 7tailwind-ui omer-metin · DesignExpert knowledge for Tailwind CSS styling and component patternsUse when "tailwind, tailwindcss, utility classes, responsive design, dark mode, styling, css classes, tailwind, css, styling, ui, responsive, dark-mode, components" mentioned.42
- 8Sage WordPress Starter Theme with Laravel Blade and Tailwind CSS agentskillexchange · DesignSage by Roots is an advanced WordPress starter theme that brings Laravel Blade templating, Vite-powered front-end builds, Tailwind CSS, and block editor support to WordPress theme development. It is the most-starred WordPress theme framework on GitHub.40
- 9tailwind-design-system boisenoise · DesignBuild production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility.40
- 10tailwind-mastery MichiBaum · DesignExpertise in utility-first CSS using Tailwind CSS. Use when styling components, implementing responsive layouts, or configuring Tailwind theme and breakpoints.39
- 11tailwind-design-system gajjalaashok75-UI · DesignBuild production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility.37
- 12tailwind skeletorflet · DesignTailwind CSS — utility-first CSS framework with responsive prefixes, dark mode, JIT engine, and customization via config.37
- 13tidy-tailwind janiorvalle · DesignUse to clean up Tailwind class lists: sort them, collapse shorthands, resolve conflicting utilities, turn arbitrary values into named ones. Class strings only. No visual changes.33
- 14modern-tailwind Carts1024 · DesignBuild clean, scalable UIs with Tailwind CSS using modern utilities and variants31
- 15tailwind-patterns gabrielmoreira · DesignTailwind CSS v4 principles and modern design tokens.31
- 16crux-tailwind-shadcn mohamed-abdelfattah-frontend · DesignBuild accessible, token-driven Tailwind and shadcn/ui interfaces without losing product identity.30
- 17tailwind-v4-modern-css aakash1552005 · DesignModern CSS & Tailwind CSS v4: native @theme design tokens, CSS container queries, CSS subgrid, fluid typography, dark mode strategies, and hardware acceleration.29
- 18tailwind-theme-lock nachiket7-dev · DesignTriggers whenever styling UI components, adjusting layout colors, or modifying Tailwind CSS utility classes.28
- 1909-tailwind-brand-system nabil2080 · DesignTailwind brand system, approved palette, and layout styling rules. Use when modifying layouts, typography, spacing, styling, or CSS classes across the application.28
- 20tailwind-css-conventions HiYasin · DesignWrite consistent, maintainable Tailwind CSS. Use when styling components with Tailwind utilities, theming, or setting up Tailwind configuration.27
- 21tailwind-master FutureJJ · DesignTailwind CSS including design systems, custom plugins, responsive patterns, dark mode, and component styling. Trigger for Tailwind configuration, custom utility creation, or Tailwind-based UI development.26
- 22tailwind-consolidate-classes lennondotw · DesignEnforces consolidation of static Tailwind CSS classes into a single template literal when using cn(), clsx(), or classnames(). Use when writing or reviewing Tailwind CSS class merging utilities, or when the user mentions cn(), clsx(), or className consolidation.26
- 23tailwind-v4-design-system 2428424081cn · DesignTailwindCSS v4 现代化 CSS 变量架构、@theme 指令与容器查询 (Container Queries) 设计准则。26
- 24tailwind-system kas1987 · Designcreate tailwind design systems, presets, config tokens, utility conventions, component recipes, and best-practice tailwind workflows. use when the user asks about tailwind, utility-first css, class organization, or reusable tailwind ui patterns.26
- 25tailwind Vision-Nexus · DesignRegenerate Tailwind CSS and fix build.rs watch triggers24
- 26sveltekit-tailwindcss-typescript-cursorrules-promp Tryboy869 · Developer toolsApply for sveltekit-tailwindcss-typescript-cursorrules-promp. --- description: Defines the required version numbers for Node.js, SvelteKit, TypeScript, Vite, and PNPM within the project. This rule ensures consistency across the project dependencies. globs: **/pa24
- 27sveltekit-restful-api-tailwind-css-cursorrules-pro Tryboy869 · DatabasesApply for sveltekit-restful-api-tailwind-css-cursorrules-pro. --- description: Defines the technology stack used in the Stojanovic-One project, including frontend, backend, database, UI styling, deployment, and authentication. This rule provides a clear understa24
- 28tailwind-design-system sharathchandra03 · DesignBuild production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility.24
- 29material-ui-tailwind Lemao81 · DesignIntegrates Material UI with Tailwind CSS v4 using cascade layers (enableCssLayer, @layer order) and documents Tailwind v3 interoperability (preflight, important, injectFirst, portals). Use when combining MUI with Tailwind utilities, slotProps className, or theme token bridges.24
- 30specsfy-specialist-tailwind-css marciohernandez · DesignImplementar e revisar Tailwind CSS com tokens, variantes, responsividade, dark mode, container queries e CSS sustentável. Use quando houver tailwindcss ou utilitários Tailwind em templates; confirme a versão porque configuração e diretivas diferem entre gerações.24
- 31tailwindcss-development IzzatFirdaus · DesignTrigger when the user mentions 'tailwind' in any form, or when building responsive grid layouts, styling UI components, adding dark mode, or fixing spacing/typography in Blade templates or CSS files.24
- 32tailwind Ivlad003 · DesignСтилізація Tailwind23
- 33tailwindcss sushichan044 · DesignLearn how to use Tailwind CSS v4's advanced features like custom utilities and variants.23
- 34tailwind-css alex-kzr · DesignDEPRECATED — absorbed into tailwind-design-system. Do not load directly; use tailwind-design-system instead.23
- 35tailwind-ui-prototyping Heretek-AI · DesignTranslates product requirements into modern, accessible, responsive UI layouts using Tailwind CSS utility classes and semantic HTML5.23
- 36skill-tailwind-advanced Andresbrt · DesignTécnicas avanzadas de Tailwind CSS, plugins y personalización del theme.23
- 37Tailwind Responsive Auditor lgzarturo · DesignAudits Tailwind CSS usage ensuring mobile-first responsive utilities and clean classes.23
- 38tailwind-config-gen Kernel8901 · DesignGenerate tailwind.config.js from brand colors. Use when setting up Tailwind.23
- 39tailwind-v4-shadcn ai4brands-design · DesignProduction-tested stack for Tailwind v4 and shadcn/ui. Optimized for AI Code Generation.22
- 40docs-tailwind swcstudiospace · DesignOffline documentation skill for Tailwind CSS (https://tailwindcss.com/docs). Use when answering questions about Tailwind CSS APIs, guides, configuration, or best practices. Prefer references/ and cite Source URLs.22
- 41adapter-tailwind JahacksV1 · DesignTailwind CSS adapter guidance for utility-first styling, design tokens, and class composition. Use when editing Tailwind-styled components or theme configuration.22
- 42tailwind-v4 vanshjain99 · DesignUse when working on Tailwind CSS v4 tasks in this project: setup, migration from v3 syntax, utility/class authoring, theme tokens with @theme, and debugging Tailwind styles.22
- 43tailwind-css MinByeongChan · DesignStyles UI with Tailwind CSS utilities, theme.extend, content paths, plugins, and cva for variants. Use when editing Tailwind config, className strings, or global CSS with @layer/@apply; when the user mentions Tailwind, utility-first styling, or prettier-plugin-tailwindcss.22
- 44modern-tailwind MrSoosGabor · DesignWrite clean, modern, concise Tailwind CSS code. Use whenever working on or reviewing Tailwind CSS code.21
- 45eushop-tailwind-design-tokens-v4 Hostilian · DesignTailwind CSS v4 Design Token Migration Skill — migrates EUshop from legacy class-based Tailwind to CSS variable-based design tokens with dark mode and WCAG contrast compliance.21
- 46tailwind-design-system ibragimov-oasis · DesignBuild production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility.20
- 47tailwind-css GAIn-Tech · DesignBuild scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI...20
- 48ub-tailwind nathan311 · DesignTailwind CSS (latest stable) best practices. Use when setting up, migrating, or debugging Tailwind in HTML, Vue + Vite, or Nuxt projects. Auto-activates when tailwind.config.ts is present or class="..." patterns suggest Tailwind.20
- 49Tailwind Patterns brovzar-lab · DesignTailwind CSS v4 utilities19
- 50tailwind 11vated · DesignTailwind CSS - use when working on related tasks19
- 51tailwind-master SocialBoost1201 · DesignTailwind CSS を使ったUI設計を最適化する。19
- 52tailwind-design-system Dhavanesh24cs412 · DesignBuild scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.19
- 53nextjs-typescript-tailwindcss-supabase David-Li0406 · DatabasesFull-stack Next.js 14 development with TypeScript, TailwindCSS, and Supabase for building production-ready web applications.19
- 54tailwindcss hayotbekismoilovExpert in TailwindCSS utility-first styling with responsive design patterns19
- 55Tailwind v4 Architect rahlplx · DesignMaster guide for Tailwind CSS v4. Enforces CSS-first configuration, native container queries, and Vite-native performance patterns.19
- 56nativewind-and-tailwind-css-compatibility David-Li0406 · DesignProvides specific version compatibility notes for NativeWind and Tailwind CSS to prevent common installation errors.19
- 57html-tailwind-css-and-javascript-expert-rule David-Li0406 · DesignSets the AI to act as an expert in HTML, Tailwind CSS, and vanilla JavaScript, focusing on clarity and readability for all HTML, JS, and CSS files.19
- 58tailwind elmomk · DesignCompile Tailwind CSS from input.css to assets/main.css18
- 59tailwind-v4 David-Li0406 · DesignUse when working on Tailwind v4. Watch for deprecated utilities and updated configuration patterns.18
- 60tailwind-theming engremran07 · DesignTailwind CSS setup, theme switching, dark mode, light mode, high contrast, CSS custom properties, responsive design. Use when: styling pages, creating themes, configuring Tailwind, building responsive layouts, adding CSS variables, switching between display styles.18
- 61@tailwindcss/vite PhopCMU · DesignVite plugin integration for Tailwind used in `vite.config.ts`.18
- 62tech-tailwind hjung3113 · DesignUse when Tailwind CSS is confirmed. Keeps utility styling consistent with the target design system.18
- 63tailwind-animation-effects forevdev · DesignUse when working on tailwind animation effects within a project using Tailwind CSS, focusing on layout, components, and styling patterns. Not for backend logic or unrelated CSS frameworks.18
- 64tailwind-design-system dcelorrio · DesignBuild production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility.18
- 65tailwindcss-layout David-Li0406 · DesignLayout utilities Tailwind CSS v4.1. Flexbox (flex, justify, items, gap), Grid (grid-cols, grid-rows, place), Position (absolute, relative, fixed, sticky, inset, z-index), Container queries (@container).18
- 66vanillajs-tailwind-ui tolchx · DesignGuidelines for Vanilla JS and Tailwind UI architecture. Invoke when adding UI components, side panels, themes, or DOM interactions.18
- 67tailwindcss-responsive David-Li0406Responsive design, breakpoints, container queries16
- 68tailwind-v4 David-Li0406 · DesignTailwind v4 custom color detection and usage rules.16
- 69css-to-tailwind meghal86 · DesignConvert CSS files to Tailwind utility classes16
- 70tailwindcss-development melvinmmelo · DesignUse this skill when working on UI, styling, or frontend. Triggers on: writing Blade templates, styling components, responsive design, dark mode, adding CSS classes, Tailwind utilities, Vite builds, or any frontend/UI work in this project.16
- 71Tailwind CSS 4 Development sky2464 · DesignGuide for using Tailwind CSS v4 with CSS-first configuration and new engine15
Questions
Is there an official Tailwind CSS MCP server?
Check the publisher on each listing: servers published by Tailwind CSS itself are the official ones. The most used Tailwind CSS server here is Tailwind Shades by bourhaouta.
How do I connect Tailwind CSS to Claude?
Pick a server below, open its page and copy the install command for Claude Code, or the config block for Claude Desktop. Most Tailwind CSS servers need an API key or token from your Tailwind CSS account.