TailwindCSS Unknown Utility Error

Error: Cannot apply unknown utility class `text-3xl`. Are you using CSS modules or similar and missing `@reference`? https://tailwindcss.com/docs/functions-and-directives#reference-directive at onInvalidCandidate (/Users/danielkliewer/personacast01/persona-forge/node_modules/tailwindcss/dist/lib.js:18:1312) at ge (/Users/danielkliewer/personacast01/persona-forge/node_modules/tailwindcss/dist/lib.js:13:29803) at /Users/danielkliewer/personacast01/persona-forge/node_modules/tailwindcss/dist/lib.js:18:373 at I (/Users/danielkliewer/personacast01/persona-forge/node_modules/tailwindcss/dist/lib.js:3:1656) at je (/Users/danielkliewer/personacast01/persona-forge/node_modules/tailwindcss/dist/lib.js:18:172) at bi (/Users/danielkliewer/personacast01/persona-forge/node_modules/tailwindcss/dist/lib.js:35:780) at async yi (/Users/danielkliewer/personacast01/persona-forge/node_modules/tailwindcss/dist/lib.js:35:1123) at async _r (/Users/danielkliewer/personacast01/persona-forge/node_modules/@tailwindcss/node/dist/index.js:10:3384) at async p (/Users/danielkliewer/personacast01/persona-forge/node_modules/@tailwindcss/postcss/dist/index.js:10:4019) at async Object.Once (/Users/danielkliewer/personacast01/persona-forge/node_modules/@tailwindcss/postcss/dist/index.js:10:4290) at async LazyResult.runAsync (/Users/danielkliewer/personacast01/persona-forge/node_modules/postcss/lib/lazy-result.js:293:11) at async runPostCSS (file:///Users/danielkliewer/personacast01/persona-forge/node_modules/vite/dist/node/chunks/dep-DZ2tZksn.js:32374:19) at async compilePostCSS (file:///Users/danielkliewer/personacast01/persona-forge/node_modules/vite/dist/node/chunks/dep-DZ2tZksn.js:32354:17) at async compileCSS (file:///Users/danielkliewer/personacast01/persona-forge/node_modules/vite/dist/node/chunks/dep-DZ2tZksn.js:32285:26) at async TransformPluginContext.handler (file:///Users/danielkliewer/personacast01/persona-forge/node_modules/vite/dist/node/chunks/dep-DZ2tZksn.js:31821:53) at async EnvironmentPluginContainer.transform (file:///Users/danielkliewer/personacast01/persona-forge/node_modules/vite/dist/node/chunks/dep-DZ2tZksn.js:31249:14) at async loadAndTransform (file:///Users/danielkliewer/personacast01/persona-forge/node_modules/vite/dist/node/chunks/dep-DZ2tZksn.js:26419:26)

The error you're seeing: ``` Error: Cannot apply unknown utility class `text-3xl`. Are you using CSS modules or similar and missing `@reference`? ``` indicates that TailwindCSS doesn't recognize the `text-3xl` class — **even though it's a valid Tailwind utility**. This usually happens due to one of the following common misconfigurations: --- ### ✅ Fix Checklist #### 1. **Ensure Tailwind is enabled in the file** If you're using Tailwind inside CSS modules or `@apply`, make sure you've added the `@tailwind` directives properly in your CSS entry file (like `index.css`, `tailwind.css`, or `global.css`): ```css @tailwind base; @tailwind components; @tailwind utilities; ``` --- #### 2. **Check if Tailwind is installed properly** Verify that `tailwindcss` is installed: ```bash npm ls tailwindcss # or pnpm list tailwindcss ``` If it's missing or version is broken, reinstall: ```bash npm install tailwindcss@latest postcss@latest autoprefixer@latest npx tailwindcss init -p ``` --- #### 3. **Check your `tailwind.config.js`** Make sure your `content` array includes all the files where you use Tailwind classes: ```js // tailwind.config.js module.exports = { content: [ './src/**/*.{js,ts,jsx,tsx}', // adjust to match your folders './components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}', ], theme: { extend: {}, }, plugins: [], } ``` If the file using `text-3xl` is **not in those paths**, Tailwind will purge the class. --- #### 4. **Using CSS modules?** If you’re using CSS Modules (e.g., `styles.module.css`) and trying to use `@apply text-3xl`, you must ensure it's a Tailwind-aware file. Otherwise, Tailwind doesn’t parse it. Use standard CSS or SCSS files outside modules for Tailwind, or pass classes directly in `className` strings in your React components. --- #### 5. **Restart Vite** Sometimes Vite needs a restart to pick up config changes: ```bash npx vite --clearScreen=false ``` Or fully restart the dev server: ```bash Ctrl + C npm run dev ``` --- ### 🧪 Optional Debug Step Add this inside a file you’re sure is scanned by Tailwind: ```html <div class="text-3xl bg-red-500">Test</div> ``` If the class doesn't apply, Tailwind isn’t watching that file. --- Let me know which setup you’re using — React, Next.js, Vite, etc. — and I can give you more tailored instructions.