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/[email protected]/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.

[rozsazoltan]

Related: How do you reference dynamic classes/utilities using a JS variable and pass them through in the class attribute inline in HTML?

[sansseriff]

For anyone else having this issue, the error you get should include the 'unknown word':

Something like: /Path/To/My/Project/src/index.css:645:15: Unknown word "&

Where the unknown word is: "&

So you should search your entire codebase for that string of characters. In my case I has a random .html file in my workspace that wasn't even part of my project that contained that string. Tailwind must have been trying to process it. Deleting this random html file fixed the issue.

[rozsazoltan]

If it's not part of the project, you can use @source and @source not to limit the boundaries of automatic source detection.