After updating to v4 getting an error "Unknown word" when using the @font-face at-rule

[jeknom]

Coming from Tailwind v3 and I have now otherwise managed to do the migration for my project, but having the @font-face in my css gives me an error from somewhere in PostCSS, but to my understanding I'm doing everything as the documentation suggests.

The error

3:24:50 PM [vite] Internal server error: [postcss] /Path/To/My/Project/src/index.css:645:15: Unknown word
  Plugin: vite:css
  File: /Path/To/My/Project/src/index.css:645:14
      at Input.error (/Path/To/My/Project/node_modules/.pnpm/postcss@8.5.2/node_modules/postcss/lib/input.js:109:16)

My css

@import 'tailwindcss';

@custom-variant dark (&:is(.dark *));

@theme {
  --font-scto-grotesk: "scto-grotesk";
}

/* Removing this fixes the error and everything works, except my font of course. */
@font-face {
  font-family: 'scto-grotesk';
  src:
    local('scto-grotesk')
    url('public/scto-grotesk-a-regular.otf') format('opentype');
}

html {
	height: 100vh;
	overflow-y: auto;
}

For context
My app is a React app, using Vite as the bundler. The vite config looks like this.

/// <reference types="vitest" />
import tailwindcss from '@tailwindcss/vite'
import react from '@vitejs/plugin-react'
import { ConfigEnv, defineConfig as defineViteConfig, mergeConfig } from 'vite'
import { checker } from 'vite-plugin-checker'
import tsconfigPaths from 'vite-tsconfig-paths'
import { configDefaults } from 'vitest/config'

const config = (env: ConfigEnv) =>
	mergeConfig(
		{
			optimizeDeps: {
				exclude: ['*.test.ts'],
			},
			plugins: [
				tailwindcss(),
				react(),
				tsconfigPaths(),
				env.mode !== 'test' &&
					checker({
						typescript: true,
						eslint: {
							useFlatConfig: true,
							lintCommand: 'eslint "./src/**/*.{ts,tsx}"',
						},
					}),
			],
		},
		{
			test: {
				environment: 'jsdom',
				mockReset: true,
				setupFiles: ['./vitest/setup.ts'],
				exclude: [...configDefaults.exclude, 'playwright/**/*'],
				globals: true,
			},
		},
	)

export default defineViteConfig((env) => config(env))

[wongjn]

Could you provide a reproduction git repo please?

[jeknom]

I managed to figure out what causes the issue and created a reproduction repo here:
https://github.com/jeknom/tailwind-v4-unknown-word-repro

So basically we had a couple of places where a developer had tried to set the height of an element dynamically like so:

<div className={`h-[${DYNAMIC_HEIGHT}px]`}>

This combined with having the @font-face at rule in css will throw the error mentioned in my initial message. If I remove rule, everything works, if I remove this dynamic class, everything works. I think the error could be improved to indicate specifically that the dynamic variable is not allowed. It was difficult to find which specific files had this issue.