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:

• Adding custom styles
• Detecting classes in source files
• Functions and directives

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:

• Adding custom styles
• Detecting classes in source files
• Functions and directives

• next.js
• tailwind-css
• themes
• tailwind-css-4

• Related: tailwindlabs/tailwindcss# 14764 – rozsazoltan Commented Mar 22 at 8:32
• 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 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 Commented Mar 22 at 15:10

1 Answer 1

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.