tailwindcss

This MCP server provides a broad set of TailwindCSS-focused tools accessible through the Model Context Protocol. It includes Information Tools to retrieve utilities, color palettes, configuration guides, and documentation search, as well as Action Tools to install Tailwind in various environments, convert CSS to Tailwind utilities, generate color palettes, and produce HTML component templates. You can query get_tailwind_utilities to filter utilities by category or CSS property, get_tailwind_colors to explore the full color palette with shades, and use get_tailwind_config_guide to learn framework-specific setup best practices. For direct actions, install_tailwind generates framework-specific installation snippets, convert_css_to_tailwind translates CSS to Tailwind classes, generate_color_palette builds color palettes from a base color, and generate_component_template creates ready-to-use HTML templates with Tailwind classes. The server supports a wide range of frameworks including React, Vue, Angular, Svelte/SvelteKit, Laravel, Vite, and Vanilla JS/HTML, enabling AI assistants to assist Tailwind development across projects.

Prerequisites:

• Node.js and npm installed on your system
• Access to run npm globally (or use npx)

Option 1: Install globally with npm (recommended for quick start)

npm install -g tailwindcss-mcp-server

Then run the server with:

npx tailwindcss-mcp-server

Option 2: Use npx directly (no global install required)

npx tailwindcss-mcp-server

Option 3: Local development (clone and build locally)

git clone https://github.com/CarbonoDev/tailwindcss-mcp-server.git
cd tailwindcss-mcp-server
npm install
npm run build

Then start from the built entry if applicable in your setup (e.g., node build/index.js or similar).

Tips:

• The MCP server exposes a rich set of tools; use the help or tool reference to discover exact parameter names for each function.
• When configuring clients (Claude, Windsurf, Cursor, etc.), you can point to the server using the recommended npx command or a local path if you built locally.
• If you encounter permission or PATH issues running npx tailwindcss-mcp-server, ensure npm bin directories are in your system PATH or use the explicit node path to the built server.
• For best results, keep your Node.js/npm versions up to date to ensure compatibility with the MCP server package.
• The server supports multiple frameworks; when using install_tailwind, specify the target framework and preferred package manager to receive tailored commands.