[v4] Cannot apply unknown utility class: ...

[EliasVal]

Hello! I am attempting to upgrade to Tailwind V4 in my existing Next.js project (15.0.0-canary) and as soon as I run the app, the console is spammed with errors like this:

./**/*.scss.css
Error evaluating Node.js code
Error: Cannot apply unknown utility class: (utility class)

Example for an offending class:

.tooltipContent {
  @apply fixed px-2 py-2;
  @apply rounded-lg text-start text-white text-sm pointer-events-none;
}

My globals.scss file imports tailwind like so:

@import "tailwindcss";
@import "tailwindcss/preflight" layer(base);
@import "tailwindcss/utilities" layer(utilities);

PostCSS config:

/** @type {import('postcss-load-config').Config} */
module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};

Tailwind config:

/** @type {import('tailwindcss').Config} */
const config = {
  important: true,
  theme: {
    extend: {
      colors: {
        'brand-primary': 'var(--brand-primary)',
        'brand-secondary': 'var(--brand-secondary)',
        'mui-gray': 'var(--mui-gray)',
        'shelly-gray': 'var(--shelly-gray)',
        'danger': 'var(--danger)',
        'success': 'var(--success)',
        'form': 'var(--form-bg)',
        'lightest-gray': 'var(--lightest-gray)',
        'shelly-disabled-gray': 'var(--shelly-disabled-gray)',
        'shelly-disabled-gray-text': 'var(--shelly-disabled-gray-text)',
        'brand-light': 'var(--brand-light)',
        'excel-green': 'var(--excel-green)',
      },
      fontWeight: {
        bold: '500',
      },
      fontSize: {
        'sm': '0.625rem',
        'base': '0.75rem', // 12px
        'lg': '0.875rem', // 14px
        'xl': '1rem', // 16px
        '2xl': '1.125rem',
        '3xl': '1.25rem',
        '4xl': '1.5rem',
        '5xl': '1.75rem',
        '6xl': '2rem',
        'custom-size': '1.75rem',
      },
    },
  },
  plugins: [],
  corePlugins: {
    preflight: false,
  },
};

[adamwathan]

Hey! Can you tell me specifically which class or classes it’s saying are invalid? Based on your setup I’d expect all the ones you’ve shown in your first snippet to work but if it’s stuff like bg-brand-primary it’s likely because you haven’t registered your config file using the @config directive which is necessary in v4.

You can also simplify your CSS file to just @import “tailwindcss”, you don’t need the other two lines 👍🏻

[ikevinmejia]

In my case: Error: Cannot apply unknown utility class: h-16v hover:bg-indigo-700 hover:bg-opacity-20 text-white text-opacity-50 text-xl font-light

This happens after install v4

[kirill-konshin]

FYI I fixed it by @reference main.css with the theme into all css modules. It was a bit hard to find docs for this, and probably the migration tool should highlight stuff like that. Or even fix.

[Diogo-Falardo]

@kirill-konshin hey can u help? how can i do that ?

[kirill-konshin]

@Diogo-Falardo @ikevinmejia @EliasVal

/* src/global.css */
@import 'tailwindcss';
layer(utilities);
@plugin "@tailwindcss/typography";

@theme {
  --font-helios: 'HeliosCondCRegular', 'Impact', 'Sans-Serif';
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1100px;
}

/* src/some.module.css */
@reference "./global.css";

.content {
  @apply flex flex-1 flex-col bg-white text-black;
}

[devansh-pan]

It is not good for DRY
Author please make this like before.
i use sveltekit in which i write css in literally every page.

[wongjn]

Please consider providing a project that reproduces the issue.

[EliasVal]

https://github.com/EliasVal/tailwind-v4-apply-repro

[wongjn]

Three things:

1. text-red is not a utility class that would exist. You may have meant something like text-red-500.
2. CSS files are processed independently, so you'd need to have @import "tailwindcss" @import "tailwindcss/theme" layer(theme); in the src/test.module.css file.
3. But you probably won't want that anyway, since you'll get the "Selector is not pure" error.

Consider using Tailwind classes instead of CSS modules. Also, Adam Wathan advocates avoiding @apply:
https://twitter.com/adamwathan/status/1226511611592085504
https://twitter.com/adamwathan/status/1559250403547652097

[arjendejong12]

I've got the same issue. However, my setup (WordPress plugin with Vite and PostCSS) is a bit different where I glob import various css files:

import.meta.glob("../css/index.css", { eager: true });
import.meta.glob("../../src/Core/Blocks/Content/**/**/style.css", { eager: true });
import.meta.glob("../../src/Core/Blocks/Marginals/**/**/style.css", { eager: true });
...

The first file contains various @imports (including @import "tailwindcss"; and @config "../../tailwind.config.js"). The other glob import files contain various classes with @apply. This works like expected in v3, but in v4 I would have to add @import "tailwindcss/theme" layer(theme); in every file that the glob finds. Now I don't get the multitute of unknown utility class errors TS also has, but it seems it doesn't recognize my custom colors defined in the js config file. Is there a way to not have add that theme import to every file, like v3? Or is there a way to have one css file where glob importing is supported so I don't have to do multiple import.meta.globs?

[Your-Ehsan]

I solved this issue by adding my base css file to the other css files like
in base.css

@import 'tailwindcss';
/* other configurations */

then css file where i am getting error

@import './base.css';