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 ponents;
@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?

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 ponents;
@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?

• javascript
• css
• typescript
• vite

Share Improve this question Follow asked Jul 11, 2022 at 21:13 taken-nametaken-name 7111 silver badge22 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

This is an old question and this might not solve the exact issue you were having here, but I was having a similar issue with my TailwindCSS setup on npm run dev.

My project was identical - setup a new Vite vue 3 project, ran the same npm mands to install and setup Tailwind, the only difference was using JS instead of TS.

What worked for me was adding .vue files in my tailwind.config.js file. It took a bit of digging but the Vue tab on the Tailwind vite install guide say to do this as well, it's just not super obvious.

You can see this in the error message that TailwindCSS was giving me on npm run dev before I added this line:

warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss./docs/content-configuration

tailwind.config.js file with .vue added:

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