I created a Vite project using the vanilla-ts template with npm create vite@latest.

I added tailwindcss with npm install -D tailwindcss postcss autoprefixer and initialized the config files via npx tailwindcss init -p.

My postcss.config.js is the following:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

And my tailwind.config.js is the following:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{ts,js}', './index.html'],
  theme: {
    extend: {},
  },
  plugins: [],
};

Within the src directory, I have my main.ts and style.css files. I added tailwind's directives to my style.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

And in my main.ts script, I import the style.css:

import './style.css';

function getElement<T extends HTMLElement>(query: string): T {
  const element = document.querySelector<T>(query);
  if (!element) throw new Error(`Element not found: ${query}`);
  return element;
}

const app = getElement<HTMLDivElement>('#app');
app.innerHTML = '>:(';

When I do npm run dev, it works flawlessly. However, when building the project with npm run build, tailwind is not being applied.

Pardon my naivety, but what am I missing?