MCP Tailwindcss

MCP Tailwind CSS Context

Servidor MCP (Model Context Protocol) para fornecer contexto completo da biblioteca Tailwind CSS

Instalação • Ferramentas • Frameworks • v3 vs v4

📋 Sobre

Este servidor MCP fornece acesso completo ao código-fonte do Tailwind CSS (repositório oficial tailwindlabs/tailwindcss), permitindo que assistentes de IA como Claude e GitHub Copilot tenham contexto profundo sobre:

• ✅ Configuração e Theme Variables
• ✅ Utilities e Plugins
• ✅ Integração com frameworks (Vite, Next.js, Nuxt, Astro, etc.)
• ✅ Diferenças entre Tailwind v3 e v4
• ✅ AST parsing para tipos TypeScript
• ✅ Auto-download e atualização do repositório oficial

🚀 Instalação

Via NPM (recomendado)

npm install -g mcp-tailwindcss

Configuração no Claude Desktop

Adicione ao seu arquivo claude_desktop_config.json:

Windows:

{
  "mcpServers": {
    "tailwindcss": {
      "command": "npx",
      "args": ["-y", "mcp-tailwindcss"]
    }
  }
}

macOS/Linux:

{
  "mcpServers": {
    "tailwindcss": {
      "command": "npx",
      "args": ["-y", "mcp-tailwindcss"]
    }
  }
}

Configuração no VS Code (GitHub Copilot)

Adicione ao seu settings.json:

{
  "github.copilot.chat.mcpServers": {
    "tailwindcss": {
      "command": "npx",
      "args": ["-y", "mcp-tailwindcss"]
    }
  }
}

🛠️ Ferramentas Disponíveis

📁 Exploração de Código

🔍 Análise de Tipos (AST)

🔄 Atualizações

🎯 Integrações

🎨 Referência de Classes

🍳 Receitas e Padrões

🎨 Integração com Frameworks

O MCP fornece guias completos para integrar Tailwind CSS com os principais frameworks:

Vite (Tailwind v4)

npm install tailwindcss @tailwindcss/vite

// vite.config.js
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tailwindcss()]
})

/* app.css */
@import "tailwindcss";

Next.js (Tailwind v4)

npm install tailwindcss @tailwindcss/postcss postcss

// postcss.config.mjs
export default {
  plugins: {
    '@tailwindcss/postcss': {}
  }
}

PostCSS (Universal)

npm install tailwindcss @tailwindcss/postcss postcss

// postcss.config.js
export default {
  plugins: {
    '@tailwindcss/postcss': {}
  }
}

CLI

npm install tailwindcss @tailwindcss/cli
npx @tailwindcss/cli -i input.css -o output.css --watch

⚡ Tailwind v3 vs v4

Principais Diferenças

Tailwind v4 - Nova Sintaxe CSS

@import "tailwindcss";

@theme {
  /* Cores customizadas */
  --color-brand: oklch(0.72 0.11 221.19);
  
  /* Breakpoints */
  --breakpoint-3xl: 120rem;
  
  /* Fontes */
  --font-display: "Satoshi", sans-serif;
  
  /* Espaçamento base */
  --spacing: 0.25rem;
}

Theme Variable Namespaces (v4)

Tailwind v3 - Configuração JavaScript

// tailwind.config.js (v3)
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors: {
        brand: '#06B6D4',
      },
      fontFamily: {
        display: ['Satoshi', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

/* styles.css (v3) */
@tailwind base;
@tailwind components;
@tailwind utilities;

📚 Exemplos de Uso

Buscar configuração de cores

Use tailwind_buscar_tipo com nome "Theme" para ver a estrutura de tema

Explorar utilities disponíveis

Use tailwind_extrair_tipos com apenas_kind "function" para ver todas as funções utilitárias

Verificar integração com Next.js

Use tailwind_integracoes com framework "next" para ver o passo a passo

Ver estrutura do projeto

Use tailwind_estrutura para explorar a organização do código-fonte

🔧 Variáveis de Ambiente

📁 Estrutura do Repositório

O MCP baixa automaticamente o repositório oficial do Tailwind CSS na primeira execução:

~/.mcp-tailwindcss/
└── tailwindcss/
    ├── packages/
    │   └── tailwindcss/
    │       └── src/           <- Código-fonte principal
    │           ├── index.ts
    │           ├── theme.css
    │           ├── preflight.css
    │           ├── utilities.css
    │           ├── compat/
    │           ├── utils/
    │           └── ...
    ├── crates/                 <- Engine Oxide (Rust)
    └── integrations/           <- Testes de integração

🎯 Utilities Reference (v4)

Layout

• container, columns-*
• break-after-*, break-before-*, break-inside-*
• box-decoration-*, box-sizing-*
• block, inline-block, inline, flex, inline-flex, grid, inline-grid
• flow-root, contents, hidden

Flexbox & Grid

• flex-*, flex-row, flex-col, flex-wrap, flex-nowrap
• grid-cols-*, grid-rows-*, gap-*
• justify-*, items-*, content-*
• place-*, self-*

Spacing

• p-*, px-*, py-*, pt-*, pr-*, pb-*, pl-*
• m-*, mx-*, my-*, mt-*, mr-*, mb-*, ml-*
• space-x-*, space-y-*

Sizing

• w-*, min-w-*, max-w-*
• h-*, min-h-*, max-h-*
• size-*

Typography

• font-*, text-*, tracking-*, leading-*
• text-left, text-center, text-right, text-justify
• underline, line-through, no-underline
• uppercase, lowercase, capitalize, normal-case

Backgrounds

• bg-*, bg-gradient-*
• from-*, via-*, to-*
• bg-cover, bg-contain, bg-center, bg-repeat, bg-no-repeat

Borders

• border, border-*, rounded-*
• ring-*, outline-*
• divide-*

Effects

• shadow-*, drop-shadow-*
• opacity-*
• mix-blend-*, bg-blend-*

Filters

• blur-*, brightness-*, contrast-*
• grayscale, hue-rotate-*, invert, saturate-*, sepia
• backdrop-*

Transitions & Animation

• transition, transition-*
• duration-*, ease-*, delay-*
• animate-*

Transforms

• scale-*, rotate-*, translate-*, skew-*
• origin-*

Interactivity

• cursor-*, pointer-events-*
• resize, resize-x, resize-y, resize-none
• select-*, touch-*, scroll-*

🤝 Contribuindo

1. Fork o repositório
2. Crie sua branch: git checkout -b feature/nova-funcionalidade
3. Commit suas mudanças: git commit -m 'feat: adiciona nova funcionalidade'
4. Push para a branch: git push origin feature/nova-funcionalidade
5. Abra um Pull Request

📄 Licença

MIT © Joseph

🔗 Links Úteis

• Tailwind CSS Documentation
• Model Context Protocol
• Tailwind v4 Upgrade Guide
• Theme Variables Reference

Feito com 💙 para a comunidade Tailwind CSS