The Figma to shadcn/ui plugin exports the **ENTIRE @theme inline block** with **circular CSS variable references**, which breaks Tailwind CSS v4 functionality. While breakpoints are the most visible issue (breaking all responsive utilities), this affects colors, typography, spacing, shadows, and all other theme values.

[amacodehouse]

Current Behavior (Broken)

What figma shadcn/ui plugin exports

@theme inline {
    // ❌ ALL 151 variables have circular references!
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-primary: var(--primary);
    --color-secondary: var(--secondary);
    --font-sans: var(--font-sans);
    --font-serif: var(--font-serif);
    --radius-sm: var(--radius-sm);
    --radius-md: var(--radius-md);
    --text-base: var(--text-base);
    --text-lg: var(--text-lg);
    --breakpoint-sm: var(--breakpoint-sm);
    --breakpoint-md: var(--breakpoint-md);
    --breakpoint-lg: var(--breakpoint-lg);
    --breakpoint-xl: var(--breakpoint-xl);
    --container-sm: var(--container-sm);
    --container-lg: var(--container-lg);
    --shadow-sm: var(--shadow-sm);
    --shadow-lg: var(--shadow-lg);
    --blur-sm: var(--blur-sm);
    // ... and 131 more variables, ALL with var() circular references
}

:root {
    // ✅ Actual values defined here
    --primary: oklch(54.9% 0.213 259.907deg);
    --background: oklch(100% 0 0deg);
    --font-sans: plus jakarta sans, sans-serif;
    --radius-sm: 0.375rem;
    --text-base: 1rem;
    --breakpoint-sm: 40rem;
    --breakpoint-lg: 64rem;
    --container-sm: 24rem;
    --shadow-sm: 0 1px 3px 0 oklch(0% 0 0deg / 10%);
    --blur-sm: 8px;
    // ... and 131 more with actual values
}

Problem

The ENTIRE @theme inline block (151 variables) uses circular references: each variable references itself via var(), which Tailwind CSS v4 cannot resolve at build time.
Scope of circular references:

• ❌ Colors (42 variables): --color-primary: var(--primary)
• ❌ Typography (28 variables): --text-lg: var(--text-lg), --font-sans: var(--font-sans)
• ❌ Breakpoints (5 variables): --breakpoint-lg: var(--breakpoint-lg)
• ❌ Containers (13 variables): --container-lg: var(--container-lg)
• ❌ Spacing/Radius (8 variables): --radius-sm: var(--radius-sm)
• ❌ Shadows (15 variables): --shadow-lg: var(--shadow-lg)
• ❌ Blur (7 variables): --blur-sm: var(--blur-sm)
• ❌ Font Weights (9 variables): --font-weight-bold: var(--font-weight-bold)
• ❌ Brand Colors (24 variables): --primary-brandPrimary: var(--primary-brandPrimary)

What Tailwind Generates

When Tailwind processes the circular reference, it generates invalid CSS:

.lg\:flex-row {
    @media (width >= var(--breakpoint-lg)) {  /* ❌ Invalid - CSS variables don't work in media queries */
        flex-direction: row;
    }
}

## Impact
### Symptoms
**Most Visible (Breakpoints):**
- ❌ **All responsive Tailwind utilities are broken** (`sm:`, `md:`, `lg:`, `xl:`, `2xl:`)
- ❌ **Layouts don't respond to screen size changes**
- ❌ **Mobile/tablet/desktop breakpoints non-functional**
**Potentially Affected (Other Theme Values):**
- ⚠️ **Colors** may not work correctly in Tailwind utilities
- ⚠️ **Typography scales** may not apply properly
- ⚠️ **Spacing/sizing** utilities may fail
- ⚠️ **Shadows and effects** may not render
- ⚠️ **Custom theme values** inaccessible to Tailwind
### Affected Utilities
**Definitely Broken:**
- All responsive variants: `lg:flex-row`, `md:grid-cols-2`, `sm:block`
- ~500+ responsive utilities across all categories
**Potentially Broken:**
- Color utilities using theme colors
- Typography utilities using theme fonts/sizes
- Spacing utilities using theme values
- Shadow/blur utilities using theme effects
- Container utilities using theme containers
**Impact:** Essentially, **the entire Tailwind theme system is compromised** because Tailwind can't read any values from `@theme inline` at build time.

## Additional Context
### Why Not Other Variables?
Other variables in `@theme inline` (colors, fonts, etc.) might work with `var()` references because:
1. They're not used in media queries
2. Tailwind can sometimes defer their resolution
3. They may have fallback mechanisms
**Breakpoints are special** because they're explicitly used in media query generation, where CSS variables are forbidden by the CSS specification.

## Environment Details
### Software Versions
- **Figma Plugin**: Figma to shadcn/ui plugin (latest as of 2026-01-14)
- **Tailwind CSS**: v4.1.18
- **Next.js**: 15.5.0
- **PostCSS**: @tailwindcss/postcss v4.1.18
- **Node.js**: 18+
### Project Setup
- **Next.js 15** App Router
- **Tailwind CSS v4** with `@tailwindcss/postcss`
- **SCSS** with `sass-embedded` v1.93.3
- **PostCSS** configuration with `@tailwindcss/postcss`
- **File format**: Figma exports as `.scss` files (imported via SCSS `@import`)

[chrisnltr]

This looks like a plugin export bug, not a Tailwind bug.

Self-references like:

--breakpoint-lg: var(--breakpoint-lg);

give Tailwind no real value at build time, so responsive utilities can break.

It should export actual values instead:

--breakpoint-lg: 64rem;

So yes... valid issue with the Figma plugin output.