Tailwind v4 Utilities Not Generating with Vite & @tailwindcss/vite plugin

I'm having a persistent issue integrating Tailwind CSS v4 into a Vite/React project, and I'm hoping someone here might have some insight.

Problem:

Tailwind utility classes are not being generated in my local build. The output CSS file includes the @theme layer with all the design tokens and the @layer base with the CSS reset, but the @layer utilities block is completely empty, containing only @tailwind utilities;. This means none of the classes I use in my components are working.

Setup:

Tailwind CSS v4 ([email protected]) Vite ([email protected]) React ([email protected], @vitejs/[email protected]) Using the first-party Vite plugin (@tailwindcss/[email protected]) Importing my main CSS file (src/index.css) into my main JSX entry file (src/index.jsx). index.css contains only @import "tailwindcss";. Key Observations:

If I use the Tailwind CDN in my index.html, all styles work correctly. This confirms my HTML structure and class names are fine. If I remove the @import "tailwindcss"; from index.css, other non-Tailwind CSS rules I might add work (though obviously Tailwind utilities don't). This suggests the issue is tied to the @import processing step.

Request for Help:

Despite these steps, Tailwind is still not scanning my content files and generating utilities locally. It seems like the @tailwindcss/vite plugin isn't correctly triggering or performing the content scanning step.

Has anyone encountered a similar issue with Tailwind v4 and the Vite plugin where utilities aren't generated even with explicit content configuration? Are there any known compatibility issues with the versions I'm using, or other potential causes related to how the plugin interacts with Vite or the file system in this scenario?

Any suggestions or guidance on how to further debug this would be greatly appreciated!

My vite.config.js:

import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  base: '/aphians',
  plugins: [
    tailwindcss(),
    react()
  ],
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    sourcemap: false
  }
});

My index.css:

@import "tailwindcss";

And package.json

    {
  "name": "client",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "start": "vite --host",
    "start:debug": "vite --debug --logLevel info",
    "build": "vite build --base=/aphians"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^7.5.3"
  },
  "devDependencies": {
    "@tailwindcss/vite": "^4.1.7",
    "@vitejs/plugin-react": "^4.0.0",
    "tailwindcss": "^4.1.6",
    "vite": "^5.0.0"
  }
}

Troubleshooting Steps Taken:

Confirmed @tailwindcss/vite plugin was installed (it was initially missing, but issue persists after installing). Performed multiple clean installations (deleted node_modules, package-lock.json, and reinstalled). Ensured index.css contains only @import "tailwindcss";. Ensured vite.config.js correctly imports and uses the tailwindcss() plugin. Explicitly defined the content array within the tailwindcss({}) plugin options in vite.config.js (./index.html, ./src/**/*.{js,jsx,ts,tsx}). Simplified the content array to target a single known file (./src/components/LandingPage.jsx) containing Tailwind classes. Removed the content option from the Vite plugin and created a minimal tailwind.config.js file in the project root with only the content array defined. Verified Vite can resolve the paths to my component files (seen in debug logs). Using Node.js version: v20.19.1