CODEWITHSUNDEEP
javascriptcsstypescriptvite
taken-name
taken-name

Reputation: 71

Why is tailwindcss not working when building my vite project?

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?

Upvotes: 7

Views: 3793

Answers (1)

Otter
Otter

Reputation: 270

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 commands 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.com/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: [],
}

Upvotes: 5

Related Questions