Tailwind v4 Extractor Connector for AI agents.
1 live capability
Instantly read CSS design tokens from your Tailwind configuration.
Waiting for input…
Why people use Tailwind v4 Extractor
Stop hunting for Tailwind v4 variables with this
This MCP changes that by letting your agent read the @theme block directly. You get an organized list of every color, font, and spacing value without ever leaving your editor.
What Vinkius changes
You get an instant, accurate map of your design system tokens.
Use it from Claude, ChatGPT, Cursor or another AI client you already have.
One account · 5,900+ Connectors
- Real-world use case 01
Migrating to v4
You are moving from JS config to CSS, and your agent is lost.
- Real-world use case 02
Component Generation
Ask your agent to build a button using only the colors found in your current theme without checking the CSS yourself.
- Real-world use case 03
Theme Auditing
Quickly check if a specific spacing scale or color palette has been added to your CSS block during a large update.
Complete set · 1capability
The complete Tailwind v4 Extractor capability set.
These are the exact actions your AI can choose when you ask it to work with Tailwind v4 Extractor.
01
1 capability in this set.
Part of 1 available through Tailwind v4 Extractor.
- 01 Capability
Extract tailwind variables
Scans your CSS to pull out all variables from a Tailwind v4 theme block. It returns the variable names, their values, and the categories found.
Set up in minutes
One URL. Then ask Tailwind v4 Extractor to work.
Claude and ChatGPT only need the Connector URL. Copy it once, add it in settings, and use Tailwind v4 Extractor from the conversation.
Choose your client
Live previewAdvanced clients IDE · CLI
Claude · Web + desktop
Connector URL · ready to paste
Streamable HTTPhttps://edge.vinkius.com/vk_preview_vDGzl1ymBCIIc1rQbAQKUm8PBWt3xt6PYxMpNsr8/mcp - Step 01
Open Connectors
In Claude Web or Claude Desktop, open Settings and choose Connectors.
- Step 02
Add the URL
Choose Add custom connector, name it Tailwind v4 Extractor, and paste the URL above.
- Step 03
Turn it on in chat
Select +, open Connectors, and enable Tailwind v4 Extractor for the conversation.
ChatGPT · Web + desktop
Connector URL · ready to paste
Streamable HTTPhttps://edge.vinkius.com/vk_preview_vDGzl1ymBCIIc1rQbAQKUm8PBWt3xt6PYxMpNsr8/mcp - Step 01
Open MCP settings
On desktop, open Settings and MCP servers. On web, open your workspace app or connector settings.
- Step 02
Add the URL
Choose Add server with Streamable HTTP, or create a custom MCP app, then paste the Tailwind v4 Extractor URL.
- Step 03
Save and start
Save the connection and enable Tailwind v4 Extractor in your conversation. Desktop may ask you to restart once.
Cursor · IDE configuration
Advanced setup
{
"mcpServers": {
"tailwind-v4-theme-variable-extractor": {
"url": "https://edge.vinkius.com/vk_preview_vDGzl1ymBCIIc1rQbAQKUm8PBWt3xt6PYxMpNsr8/mcp"
}
}
}- Step 01
Open MCP Settings
Press Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux) → search "MCP Settings"
- Step 02
Add the server config
Paste the JSON configuration above into the mcp.json file that opens
- Step 03
Save the file
Cursor will automatically detect the new Connector
- Step 04
Start using Tailwind v4 Extractor
Open Agent mode in chat and ask: "Using Tailwind v4 Extractor, help me...". 1 tools available
VS Code Copilot · IDE configuration
Advanced setup
{
"mcpServers": {
"tailwind-v4-theme-variable-extractor": {
"url": "https://edge.vinkius.com/vk_preview_vDGzl1ymBCIIc1rQbAQKUm8PBWt3xt6PYxMpNsr8/mcp"
}
}
}- Step 01
Create MCP config
Create a .vscode/mcp.json file in your project root
- Step 02
Add the server config
Paste the JSON configuration above
- Step 03
Enable Agent mode
Open GitHub Copilot Chat and switch to Agent mode using the dropdown
- Step 04
Start using Tailwind v4 Extractor
Ask Copilot: "Using Tailwind v4 Extractor, help me...". 1 tools available
Windsurf · IDE configuration
Advanced setup
{
"mcpServers": {
"tailwind-v4-theme-variable-extractor": {
"url": "https://edge.vinkius.com/vk_preview_vDGzl1ymBCIIc1rQbAQKUm8PBWt3xt6PYxMpNsr8/mcp"
}
}
}- Step 01
Open MCP Settings
Go to Settings → MCP Configuration or press Cmd+Shift+P and search "MCP"
- Step 02
Add the server
Paste the JSON configuration above into mcp_config.json
- Step 03
Save and reload
Windsurf will detect the new server automatically
- Step 04
Start using Tailwind v4 Extractor
Open Cascade and ask: "Using Tailwind v4 Extractor, help me...". 1 tools available
Cline · IDE configuration
Advanced setup
{
"mcpServers": {
"tailwind-v4-theme-variable-extractor": {
"url": "https://edge.vinkius.com/vk_preview_vDGzl1ymBCIIc1rQbAQKUm8PBWt3xt6PYxMpNsr8/mcp"
}
}
}- Step 01
Open Cline MCP Settings
Click the Connectors icon in the Cline sidebar panel
- Step 02
Add remote server
Click "Add Connector" and paste the configuration above
- Step 03
Enable the server
Toggle the server switch to ON
- Step 04
Start using Tailwind v4 Extractor
Ask Cline: "Using Tailwind v4 Extractor, help me...". 1 tools available
Claude Code · Terminal command
Advanced setup
claude mcp add tailwind-v4-theme-variable-extractor --transport http "https://edge.vinkius.com/vk_preview_vDGzl1ymBCIIc1rQbAQKUm8PBWt3xt6PYxMpNsr8/mcp"- Step 01
Install Claude Code
Run npm install -g @anthropic-ai/claude-code if not already installed
- Step 02
Add the Connector
Run the command above in your terminal
- Step 03
Verify the connection
Run claude mcp to list connected servers, or type /mcp inside a session
- Step 04
Start using Tailwind v4 Extractor
Ask Claude: "Using Tailwind v4 Extractor, show me...". 1 tools are ready
Where the request belongs
Work Tailwind v4 Extractor can move forward.
Frontend engineers and UI developers building or migrating to Tailwind v4 who are tired of manually feeding design tokens to their AI agents.
Frontend Engineer
Uses it to ensure generated components use the correct theme variables.
UI Developer
Quickly audits design tokens without digging through large CSS files.
Design Systems Engineer
Keeps documentation and implementation in sync by extracting live values.
Build the capability set
Add more capabilities.
Each Connector adds new actions and data without changing how you work.
Browse Connectors
Tailwind v4 Theme Variable Extractor
Extracts CSS variables from Tailwind v4 @theme blocks.
Tailwind Excellence Prover
AI agents build bloated styling layers containing arbitrary values, div-only layouts, inaccessible contrast, and legacy configurations. This prover enforces strict design token structures (@theme), utility-first compliance, semantic HTML, mobile-first layouts, and interactive focus states.
Design Token Transformer
Convert, resolve, and generate multi-platform design tokens (JSON, CSS, SCSS, Tailwind, etc.).
Deterministic Color Engine
Equip your AI with precise UI design capabilities. Deterministically convert HEX/RGB/HSL, manipulate luminance, and generate mathematically perfect palettes.
CSS Class Usage & Collision Analyzer
Identify orphaned, missing, or colliding CSS classes in your project.
Design Prover
Every AI frontend looks identical: hero, 3 cards, 3 cards, CTA, rounded-xl, shadow-lg, blue/gray/white. Design Prover forces the agent to prove its design has dramatic hierarchy, unpredictable layout, intentional whitespace, commanding typography, and color with actual personality.
Bring your own AI
Change the model, client or framework. Keep Tailwind v4 Extractor connected.
-
Claude -
ChatGPT -
Gemini -
Cursor -
VS Code -
Windsurf -
ZCode -
Cline -
Zed -
Continue -
Kiro -
Roo Code -
Zencoder -
Goose -
Void -
Augment Code -
Amp -
Qodo -
Tabnine -
Pieces -
Sourcegraph Cody -
JetBrains -
Warp -
Amazon Q -
Antigravity -
BoltAI -
Raycast -
Jan -
LM Studio -
AnythingLLM -
Open WebUI -
Msty -
Cherry Studio -
LibreChat -
TypingMind -
Chorus -
5ire -
n8n -
LangChain -
LlamaIndex -
CrewAI -
Vercel AI SDK
Before you connect
Questions about Tailwind v4 Extractor.
The practical details behind the request, access and result.
How do I use Tailwind v4 Theme Variable Extractor to find my colors?
You simply point your AI agent to your CSS file. The MCP scans the @theme block and returns a structured list of every color variable defined there.
Can this MCP work with older Tailwind versions?
No, this is specifically designed for Tailwind v4 because it targets the new @theme CSS block structure.
Does the Tailwind v4 Theme Variable Extractor help with spacing errors?
Yes. It provides your agent with the exact spacing scale defined in your CSS, preventing it from using non-existent values.
How does this MCP handle large CSS files?
It focuses specifically on isolating and parsing the @theme block, which keeps the data sent to your agent lightweight and relevant.
Can I use this with Cursor or Claude?
Yes, any MCP-compatible client like Cursor, Claude, or Windsurf can use this to read your Tailwind variables.
What does this capability do?
It parses a CSS string to find the @theme block and extracts all variables like --color-blue-500.
Does it support Tailwind v3?
No, this capability is specifically designed for the new @theme block syntax introduced in Tailwind CSS v4.
How can I use it with Cursor or Claude Desktop?
You can connect via Vinkius Edge using your personal Connection Token. Once connected, you can simply ask the agent to extract variables from a CSS snippet.
One connection away
Give your agent a direct line to Tailwind v4 Extractor.
Connect Tailwind v4 Extractor once. Keep it beside 5,900+ managed Connectors when the next task needs more.
Explore every Connector No credit card required · Free tier available