[upgrade to v4] Error: Cannot apply unknown utility class: lg:block

[thepra]

What version of Tailwind CSS are you using?

v3.4.17

What build tool (or framework if it abstracts the build tool) are you using?

npx

What version of Node.js are you using?

v22.14.0

What operating system are you using?

Windows

Reproduction URL

@layer base {
    .no-scrollbar-mobile::-webkit-scrollbar {
    @apply hidden lg:block;
  }
}

Describe your issue

Can't upgrade because of that issue in the title, weirdly enough, it can't interpret lg:block as a valid concatenated class.

[RobinMalfait]

Hey!

I'm guessing you are writing this code in a <style> block or another CSS file. If that's the case, make sure to reference your main app.css (or whatever it is named) file.

More info: https://tailwindcss.com/docs/upgrade-guide#using-apply-with-vue-svelte-or-css-modules

If this is not the case, consider sharing a minimal reproduction repo so we can take a look.

[thepra]

@RobinMalfait Nope, the most dynamic thing is a Blazor instruction:

<div class="group-users relative bg-primary-200 dark:bg-primary-950 d-shadow-inset-sm d-border rounded-md max-h-40
@SUtility.IfTrueThen(!userGroup.IsExpanded, "hidden lg:block")">

otherwise its used everywhere in the usual manner class="hidden lg:block" with no exception and content portion of the tailwind.confi.js looks like this:

content: [
    "!./.vs",
    "!./**/bin",
    "!./**/obj",
    "!./**/.vscode",
    "!./**/node_modules",
    "./**/*.{razor,html,cs}",
  ],

[thepra]

ok, here's more context of upgrade command output:

PS C:\Users\V01D\Desktop\projects\Sintopia\Client> npx @tailwindcss/upgrade .\Sintopia.Client.SharedComponents\wwwroot\css\app.css --force
≈ tailwindcss v4.1.6

│ Migrating stylesheets…

│ ↳ Cannot apply unknown utility class: lg:block in .\Sintopia.Client.SharedComponents\wwwroot\css\app.css

│ ↳ Migrated stylesheet: .\Sintopia.Client.SharedComponents\wwwroot\css\app.css

│ Updating dependencies…

│ ↳ Updated package: tailwindcss

│ Migrating templates…

Error: Cannot apply unknown utility class: lg:block

One thing of particular note:
that .no-scrollbar-mobile class is the first one after a list of naked styles declarations in the @layer base, so basically it's stopping everything at the first @apply declaration

ps: I tried to also remove lg:block from everywhere in the markup but nothing changed and changing the class to something like this:

  .no-scrollbar-mobile {
    @apply [&::-webkit-scrollbar]:hidden lg:[&::-webkit-scrollbar]:block;
  }

but still same error.

[thepra]

nevermind, its not that class, after removing it I get same error on a text-primary-50 where primary is declared in the tailwind.config.js like this:

const plugin = require('tailwindcss/plugin')

module.exports = {
content: [
"!./.vs",
"!.//bin",
"!.//obj",
"!.//.vscode",
"!.//node_modules",
"./**/*.{razor,html,cs}",
],
darkMode: 'selector',
theme: {
extend: {
grayscale: {
25: '25%',
50: '50%',
75: '75%',
},
backgroundImage: {
'logo-black': 'url(/_content/Sintopia.Client.SharedComponents/imgs/logo-black.svg)',
'logo-white': 'url(/_content/Sintopia.Client.SharedComponents/imgs/logo-white.svg)',
'logo-timelines': 'url(/_content/Sintopia.Client.SharedComponents/imgs/timelines-logo.svg)',
},
colors: {
primary: {
'50': 'var(--primary-50,hsl(176, 89%, 96%))',
'100': 'var(--primary-100,hsl(179, 84%, 90%))',
'200': 'var(--primary-200,hsl(179, 80%, 80%))',
'300': 'var(--primary-300,hsl(180, 80%, 69%))',
'400': 'var(--primary-400,hsl(181, 74%, 53%))',
'500': 'var(--primary-500,hsl(181, 82%, 43%))',
'600': 'var(--primary-600,hsl(184, 78%, 36%))',
'700': 'var(--primary-700,hsl(185, 71%, 31%))',
'800': 'var(--primary-800,hsl(187, 59%, 27%))',
'900': 'var(--primary-900,hsl(188, 55%, 24%))',
'950': 'var(--primary-950,hsl(189, 68%, 15%))'
}
},
fontFamily: {
"default": ["Inter", "ui-sans-serif", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"]
},
fontSize: {
"xxs": ["0.65rem", "0.9rem"]
},
flex: {
'full-row': '0 0 100%'
},
borderColor: {
"d-border": "var(--d-border)"
}
},
},
plugins: [
plugin(function ({
addUtilities,
theme
}) {
const utilities = {
'.d-border': {
'--d-border': theme('colors.primary.700'),
'borderColor': 'var(--d-border)',
'borderWidth': '1px'
},
'.d-border-b': {
'--d-border': theme('colors.primary.700'),
'borderColor': 'var(--d-border)',
'borderWidth': '0 1px 1px 1px'
},
'.d-border-n': {
'--d-border': theme('colors.primary.700'),
'borderColor': 'var(--d-border)',
'borderWidth': '1px 0 0 0'
},
'.d-border-s': {
'--d-border': theme('colors.primary.700'),
'borderColor': 'var(--d-border)',
'borderWidth': '0 0 1px 0'
},
'.d-border-o': {
'--d-border': theme('colors.primary.700'),
'borderColor': 'var(--d-border)',
'borderWidth': '0 0 0 1px'
},
'.d-border-e': {
'--d-border': theme('colors.primary.700'),
'borderColor': 'var(--d-border)',
'borderWidth': '0 1px 0 0'
},
'.d-border-t': {
'--d-border': theme('colors.primary.700'),
'borderColor': 'var(--d-border)',
'borderWidth': '1px 1px 0 1px'
},
'.d-border-tr': {
'--d-border': theme('colors.primary.700'),
'borderColor': 'var(--d-border)',
'borderWidth': '1px 1px 0 0'
},
'.d-border-tl': {
'--d-border': theme('colors.primary.700'),
'borderColor': 'var(--d-border)',
'borderWidth': '1px 0 0 1px'
},
'.d-border-x': {
'--d-border': theme('colors.primary.700'),
'borderColor': 'var(--d-border)',
'borderWidth': '0 1px 0 1px'
},
'.d-border-l': {
'--d-border': theme('colors.primary.700'),
'borderColor': 'var(--d-border)',
'borderWidth': '1px 0 1px 1px'
},
'.d-border-r': {
'--d-border': theme('colors.primary.700'),
'borderColor': 'var(--d-border)',
'borderWidth': '1px 1px 1px 0'
},
'.dark .d-border': {
'--d-border': theme('colors.primary.300'),
},
'.dark .d-border-b': {
'--d-border': theme('colors.primary.300'),
},
'.dark .d-border-n': {
'--d-border': theme('colors.primary.300'),
},
'.dark .d-border-s': {
'--d-border': theme('colors.primary.300'),
},
'.dark .d-border-o': {
'--d-border': theme('colors.primary.300'),
},
'.dark .d-border-e': {
'--d-border': theme('colors.primary.300'),
},
'.dark .d-border-t': {
'--d-border': theme('colors.primary.300'),
},
'.dark .d-border-tr': {
'--d-border': theme('colors.primary.300'),
},
'.dark .d-border-tl': {
'--d-border': theme('colors.primary.300'),
},
'.dark .d-border-x': {
'--d-border': theme('colors.primary.300'),
},
'.dark .d-border-l': {
'--d-border': theme('colors.primary.300'),
},
'.dark .d-border-r': {
'--d-border': theme('colors.primary.300'),
},
}

  addUtilities(utilities)
}),
require('@tailwindcss/typography')

],
}

something fishy is going on.