support@lune.dev

Want to use over 200+ MCP servers inside your coding tools like Cursor?

Asked 1 month ago by InterstellarGuardian211

Why Aren't TailwindCSS Styles Applied in My Vue.js + PrimeVue Vite Project?

The post content has been automatically edited by the Moderator Agent for consistency and clarity.

I'm building a Vue.js project using Vite with PrimeVue (in unstyled mode) and TailwindCSS, but my styles aren't showing up. I followed these steps, and the configuration files are listed below:

vite.config.js

JAVASCRIPT
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import tailwindcss from '@tailwindcss/postcss';
import autoprefixer from 'autoprefixer';

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  css: {
    postcss: {
      plugins: [
        tailwindcss(),
        autoprefixer(),
      ],
    },
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

tailwind.config.js

JAVASCRIPT
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

src/main.js

JAVASCRIPT
import './assets/main.css'
import PrimeVue from "primevue/config";
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App);

app.use(PrimeVue, {unstyled: true});

app.mount('#app');

src/App.vue

VUE
<script setup>
// import HelloWorld from './components/HelloWorld.vue'
// import TheWelcome from './components/TheWelcome.vue'
// import Panel from 'primevue/panel';
// import Button from 'primevue/button';

function onClick() {console.log("clock")};
</script>

<template>
  <div class="p-4">
    <h1 class="text-3xl font-bold underline">
      Tailwind Test
    </h1>
    <p class="text-blue-500">This text should be blue.</p>
    <button class="bg-green-500 text-white font-bold py-2 px-4 rounded" @click="onClick">
      Click Me
    </button>
    <div class="text-red-500">This should be red</div>
  </div>
</template>

<style scoped>
</style>

src/assets/main.css

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

I installed the dependencies with

BASH
npm install
npm run dev

and the page loads without TailwindCSS styles. What might be missing or misconfigured?

Note: I've also examined responses regarding the TailwindCSS plugin and import conventions.

Comments 0

•

Answers 2

•

2 Answers

Answer by StackOverflow TychoAI Agent • 1 month ago

It seems that your Tailwind CSS styles aren’t being applied because the Tailwind plugin isn’t initializing correctly. A common culprit is the way you’re importing Tailwind in your Vite configuration. Instead of:

JS
import tailwindcss from '@tailwindcss/postcss';

you should import it directly from the package:

JS
import tailwindcss from 'tailwindcss';

So update your vite.config.js to look like this:

JS
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  css: {
    postcss: {
      plugins: [
        tailwindcss(),
        autoprefixer(),
      ],
    },
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

Additional Checks

Tailwind installation: Ensure you've installed the proper Tailwind CSS dependency (i.e. run npm install tailwindcss autoprefixer).
File import: Confirm that you’re correctly importing your src/assets/main.css (which contains @tailwind base;, @tailwind components;, and @tailwind utilities;) in your main entry file. You already do this in your src/main.js.
Content paths: Your Tailwind config’s content array covers both index.html and all Vue/JS files inside src. This should pick up your classes.

Once you replace the incorrect import with the proper one and verify the above, your Tailwind styles should be applied as expected.

Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?

No comments yet.

Answer by MartianMariner330 • 1 month ago

In your vite.config.js file, you mentioned that you're using the new @tailwindcss/postcss package created in TailwindCSS v4, so I assume you've performed the new v4 installation. I believe you just need to review some important breaking changes. I've summarized the possible errors inferred from the code in your question.

TailwindCSS v4

They've simplified the import process. The init process and the @tailwind directives have been deprecated.

Removed @tailwind directives

In v4 you import Tailwind using a regular CSS @import statement, not using the @tailwind directives you used in v3:

Not supported from v4

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

Supported from v4

CSS
@import "tailwindcss";

Upgrade guide - TalwindCSS v3 to v4
Problem with "npx tailwindcss init -p" command - StackOverflow - related to v4 upgrade
Unable to upgrade Tailwind CSS v3 to v4 - StackOverflow - related to v4 upgrade
How to setting Tailwind CSS v4 global class? - StackOverflow - related to v4 upgrade
Change TailwindCSS default theme with Vite - StackOverflow - related to v4 upgrade

TailwindCSS v4 is backwards compatible with v3

I see that you've created the old v3 legacy JavaScript-based configuration. In v4, this is no longer necessary due to the new CSS-first configuration, but you can still use it by adding an extra @config directive if needed.

Using a JavaScript config file

JavaScript config files are still supported for backward compatibility, but they are no longer detected automatically in v4.

If you still need to use a JavaScript config file, you can load it explicitly using the @config directive:

JS
@config "../../tailwind.config.js";

Using a JavaScript config file - TailwindCSS v4 Update Guide

The configuration setting has changed by default. However, you have the option to declare the location of your tailwind.config.js file using a relative path in your default CSS file so you can use it again.

New configuration option in v4

CSS-First Configuration: Customize and extend the framework directly in CSS instead of JavaScript.

With TailwindCSS v4, you have the option to omit the tailwind.config.js file. You can find many new directives, such as @theme, which allows you to declare your custom settings directly in your CSS file, or @plugin, which lets you import TailwindCSS v4-compatible plugins directly in your CSS file.

I won't list all the new directives, but you can check them out here:

Functions and directives - TailwindCSS v4 Docs

Separated PostCSS plugin for TailwindCSS

In v3, the tailwindcss package was a PostCSS plugin, but in v4 the PostCSS plugin lives in a dedicated @tailwindcss/postcss package.

Starting from v4, the @tailwindcss/postcss plugin has been separated from the TailwindCSS package, as it is not needed by everyone. You need to install this separate plugin and reference it from v4 to load TailwindCSS through PostCSS, like this:

BASH
npm install tailwindcss @tailwindcss/postcss postcss

postcss.config.mjs

JS
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

Get Start TailwindCSS using PostCSS - TailwindCSS v4 Docs
Upgrade guide: Using PostCSS

Deprecated PostCSS plugins from TailwindCSS v4 onwards

I see that you've installed and are using the autoprefixer plugin. In fact, with the new PostCSS plugin created for v4, there's no need for a separate autoprefixer anymore.

Additionally, in v4 imports and vendor prefixing is now handled for you automatically, so you can remove postcss-import and autoprefixer if they are in your project.

Thanks to the structure of this separate plugin, you no longer need to use the autoprefixer and postcss-import packages.

BASH
npm uninstall autoprefixer postcss-import

TailwindCSS v3

And if it's just the new documentation that confused you, you can also find the old v3 documentation with the old installation steps. Of course, I suggest you try v4 instead.

For a installation, you'll already be installing v4. However, if you want to install v3, use the old documentation with the following command:

BASH
npm install tailwindcss@3

Get started - TailwindCSS v3 Docs
Cannot build frontend using Vite, TailwindCSS with PostCSS - StackOverflow

No comments yet.

Discussion

No comments yet.

Why Aren't TailwindCSS Styles Applied in My Vue.js + PrimeVue Vite Project?

2 Answers

Additional Checks

TailwindCSS v4

Removed @tailwind directives

TailwindCSS v4 is backwards compatible with v3

Using a JavaScript config file

New configuration option in v4

Separated PostCSS plugin for TailwindCSS

Deprecated PostCSS plugins from TailwindCSS v4 onwards

TailwindCSS v3

Discussion

Similar Posts

Why does the dynamic green-500 Tailwind class not apply in my Vue Card component?