How to Access Theme in Tailwind CSS v4?

[mirhamasala]

Hey Everyone, ☀️

We used to be able to use:

import theme from 'tailwindcss/defaultTheme';

We primarily used it for TypeScript type definitions, like:

type SpacingValue = keyof typeof theme.spacing;
type BreakpointValue = keyof typeof theme.screens;

We also used theme.screens programmatically, like this:

const screens = theme.screens;

type Breakpoint = keyof typeof screens;
type Width = `${number}px` | `${number}vw`;
type Args = { startSize: Width } & Partial<Record<Breakpoint, Width>>;

function getScreenWidthNumber(screenSize: Breakpoint) {
  const widthAsString = screens[screenSize].replace('px', '');
  return Number(widthAsString);
}

After upgrading to Tailwind CSS v4, this no longer seems possible.

Is there an official or recommended way to access the theme (types) in v4?

Appreciate any guidance—thanks! 🙏🏼

(We already read about Theme values in JavaScript.)

[uncvrd]

Hi @mirhamasala I'm kind of stuck on this as well during my migration to v4. In the docs, they state that they hope we can just access the values via getComputedStyle. In order to have access to the variable, you'd need to define it in the config like this

:root {
    --breakpoint-sm: 40rem;
}

and then reference like in your theme like this

@theme inline {
    --*: initial;

    --breakpoint-sm: var(--breakpoint-sm);
}

I feel like this is fine for most CSS situations. However for breakpoints, this generates an invalid css like this

    @media (width >= var(--breakpoint-sm)) {
      max-width: 40rem;
    }

Apparently you can't reference css variables in @media queries 🤷

The quick fix for this is to just define the CSS variable --breakpoint-sm: 40rem; in the :root AND in the @theme inline

Because then you can extract the value using getComputedStyle since it's in :root and then the theme would have the valid value for your media queries since it's also in the @theme....But I would love to be able to only have a single source of truth for this instead of two spots.

Anyone have any further ideas?

[philipp-spiess]

theme variables are only exposed as CSS variables if they are used at runtime. However since your code snippet uses string concatenation, we don't know that. One fix would be to write out all --breakpoint-sm etc. variable names in JavaScript (then we'd know you use them and we would print them). The other way to do this is to use the new @theme static feature:

@theme static {
  --breakpoint-*: initial;
  --breakpoint-sm: 40rem;
}

[uncvrd]

@philipp-spiess maybe i didn't explain correctly, sorry. But the code I have for calculating the breakpoints works perfectly fine if I do

:root {
    --breakpoint-sm: 40rem;
    --breakpoint-md: 48rem;
    --breakpoint-lg: 64rem;
    --breakpoint-xl: 80rem;
    --breakpoint-2xl: 96rem;
}

@theme inline {
    --*: initial;

    --breakpoint-sm: 40rem;
    --breakpoint-md: 48rem;
    --breakpoint-lg: 64rem;
    --breakpoint-xl: 80rem;
    --breakpoint-2xl: 96rem;
}

But I wanted to prevent duplicating these values in two places so I thought I could do

:root {
    --breakpoint-sm: 40rem;
    --breakpoint-md: 48rem;
    --breakpoint-lg: 64rem;
    --breakpoint-xl: 80rem;
    --breakpoint-2xl: 96rem;
}

@theme inline {
    --*: initial;

    --breakpoint-sm: var(--breakpoint-sm);
    --breakpoint-md: var(--breakpoint-me);
    --breakpoint-lg: var(--breakpoint-lg);
    --breakpoint-xl: var(--breakpoint-xl);
    --breakpoint-2xl: var(--breakpoint-2xl);
}

So that I only define the values in one location

But this fails since tailwind is trying to resolve the value of the @media queries with a var() which is not valid css syntax. Defining the value as a css variable is necessary too since I want to access the values programmatically, since we can no longer resolve the config like we could in v3

[philipp-spiess]

Yeah you can not read runtime CSS variables in @media queries, you have to define them inside an @theme block for this to work. What I'm suggesting is you omit the :root declaration and let Tailwind CSS do that for you (via the @theme static feature)

[uncvrd]

@philipp-spiess my apologies, just re read the docs and forgot that JS files are scanned too. I'll give writing out the css classes in JS explicitly instead of concatenation (also missed your initial 'static' alternative too sorry😩)

I'll give both options a shot and report back

[uncvrd]

@philipp-spiess

Writing out the hook like this

type BreakpointKey = "--breakpoint-sm" | "--breakpoint-md" | "--breakpoint-lg" | "--breakpoint-xl" | "--breakpoint-2xl"

function getAllBreakpointVariables() {
    const styles = getComputedStyle(document.documentElement)

    const breakpointNames: BreakpointKey[] = [
        "--breakpoint-sm",
        "--breakpoint-md",
        "--breakpoint-lg",
        "--breakpoint-xl",
        "--breakpoint-2xl",
    ]

    const breakpoints: Record<string, string> = {}

    // Loop through each breakpoint name and get its value
    breakpointNames.forEach((name) => {
        const value = styles.getPropertyValue(name).trim()
        breakpoints[name] = value
    })

    return breakpoints
}

let breakpoints: Record<string, string> | null = null

export function useBreakpoint<K extends BreakpointKey>(breakpointKey: K) {
    if (!breakpoints) {
        breakpoints = getAllBreakpointVariables()
    }

    return useMediaQuery({
        query: `(width >= ${breakpoints[breakpointKey]})`,
    })
}

and doing

@theme inline {
    --breakpoint-sm: 40rem;
    --breakpoint-md: 48rem;
    --breakpoint-lg: 64rem;
    --breakpoint-xl: 80rem;
    --breakpoint-2xl: 96rem;
}

as you mentioned, worked. thank you very much!

[andymerskin]

It would be amazing if Tailwind generated a .ts file with the theme configuration fully typed based on what you've defined in your theme, given some input files (like your root CSS file(s) where you define everything).

Then colors, spacing, etc. could be properly type-checked when you're referencing them in TypeScript.

In our project with Tailwind v3, we do a lot of this:

// We use some nifty TypeScript crawling to get every defined color in our config. Basically dot-notation for `color.shade`:
type TwColor = ...;

const getTwColor = (path: TwColor) => {
  // logic to get theme color based on input
};

// Usage
const color = getTwColor("red.500");
const variableColor = getTwColor(myConfig.color);

This lets us pass colors around freely with full type-safety. With Tailwind v4's CSS theme setup, there's no way to loop over the available colors or theme values unless we define them manually, which defeats the purpose of parsing the theme. Now we would have to manage a separate "theme" away from the real theme, and keep them in sync manually, which is a nightmare.