How to log theme values in a Next.js app using TailwindCSS 4?

Question

When using TailwindCSS 3 in a Next.js app you could console log the theme in layout.tsx when you were implementing a tailwind.config.ts:

import resolveConfig from 'tailwindcss/resolveConfig';
import tailwindConfig from '../../tailwind.config';

const { theme } = resolveConfig(tailwindConfig);
console.log({ theme });

Since TailwindCSS v4 is going away from the config and using a CSS-first approach and tailwindcss/resolveConfig doesn't seem to be present how could someone in layout.tsx console.log their theme?

Research

Nothing found when reading through:

Although I wrote a answer, I have another idea; could it be accessed using tailwindcss/plugin? Unfortunately, I haven't tested anything yet, but when I have time, I'll check if there's any hacky solution. Although I think if you don't want to access your own values too much, the defaultTheme will temporarily solve all your problems. — rozsazoltan
– rozsazoltan, Commented Mar 22 at 8:59
By the way, from v4 onwards, many values can be calculated using the --spacing variable; padding, margin, width, height, etc. making it almost unnecessary to load the theme. — rozsazoltan
– rozsazoltan, Commented Mar 22 at 15:10

rozsazoltan · Accepted Answer · 2025-03-22 08:37:16Z

0

There is currently no alternative to this solution (yet) in TailwindCSS v4. However, there is ongoing discussion about it:

tailwindlabs/tailwindcss# 14764

I'm not sure what the end goal is, but for example, you can access the colors like this:

import colors from 'tailwindcss/colors'

Source: packages/tailwindcss/package.json line 26-29

Or for every parameter of the default theme, like this:

import defaultTheme from 'tailwindcss/defaultTheme'

Source: packages/tailwindcss/package.json line 42-45

Unfortunately, these are just partial solutions to the whole issue, and there is currently no real alternative.

answered Mar 22 at 8:37

rozsazoltan

18.4k8 gold badges49 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to log theme values in a Next.js app using TailwindCSS 4?

Research

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Research

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related