# Tailwind v4 Extractor MCP for AI Agents MCP

> Tailwind v4 Theme Variable Extractor MCP for reading CSS variables directly from your Tailwind configuration blocks. It pulls out colors, spacing, and fonts so your agent knows exactly what is available in your theme without manual searching or copy-pasting.

## Overview
- **Category:** developer-tools
- **Price:** Free
- **Endpoint:** https://edge.vinkius.com/vk_preview_vDGzl1ymBCIIc1rQbAQKUm8PBWt3xt6PYxMpNsr8/mcp
- **Tags:** tailwind, css, parsing, variables, automation

## Description

Working with Tailwind v4 means your design system lives in CSS now instead of a JavaScript file. This shift makes it harder for your AI client to know which colors or spacing values are actually valid. Instead of you manually hunting through @theme blocks and copying values into a prompt, this MCP does the heavy lifting. It scans your CSS files, finds the theme definitions, and hands over a structured list of every variable you have defined. Whether you are using Claude or Cursor, you can just point them at your stylesheet and they will instantly understand your design tokens. Vinkius makes it easy to connect this directly to your workflow so your agent stays in sync with your actual styles. No more guessing if a specific color exists; the agent just knows.

## Tools

### 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.

## Prompt Examples

**Prompt:** 
```
What colors do I have available in my current Tailwind theme?
```

**Response:** 
```
I found the following color variables in your @theme block:

| Variable | Value |
| :--- | :--- |
| `--color-primary` | `#3b82f6` |
| `--color-secondary` | `#10b981` |
| `--color-accent` | `#f59e0b` |
```

**Prompt:** 
```
Check if I have a spacing variable for 1.5rem.
```

**Response:** 
```
I checked your theme variables. You do not have a specific entry for `1.5rem`, but you do have `--spacing-md: 1rem` and `--spacing-lg: 2rem`.
```

**Prompt:** 
```
List all the font families defined in this CSS block.
```

**Response:** 
```
Your theme defines the following fonts:
* `--font-sans`: `Inter, ui-sans-serif`
* `--font-mono`: `Fira Code, monospace`
```

## Capabilities

### Identify theme blocks
Finds the specific @theme section within your CSS files.

### Parse design tokens
Breaks down variables into usable categories like colors and spacing.

### Count definitions
Returns a total count of all found variables for quick verification.

### Categorize styles
Groups variables by type so your agent can find fonts or colors easily.

## Use Cases

### Migrating to v4
You are moving from JS config to CSS, and your agent is lost. Use this to re-teach it your new theme structure instantly.

### Component Generation
Ask your agent to build a button using only the colors found in your current theme without checking the CSS yourself.

### Theme Auditing
Quickly check if a specific spacing scale or color palette has been added to your CSS block during a large update.

## Benefits

- Eliminate manual copy-pasting of CSS variables into your chat window.
- Ensure your agent always uses valid colors and spacing defined in extract_tailwind_variables.
- Reduce errors by providing your AI client with the exact structure of your @theme block.
- Speed up component creation by letting your agent see all available fonts and scales immediately.
- Keep your design system tokens synchronized across all your AI-driven development tasks.

## How It Works

The bottom line is you get an instant, accurate map of your design system tokens.

1. Connect the MCP to your preferred AI client via Vinkius.
2. Provide a CSS snippet or file path containing your Tailwind v4 @theme block.
3. The tool parses the block and returns a structured list of all extracted variables.

## Frequently Asked Questions

**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 tool 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 tool 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.