1

I have the following project.

vite.config.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/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

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

src/main.js

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

<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

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

I run

npm install
npm run dev

And see an unstyled page. What am I missing?

I am trying to set up Vue.js + PrimeVue unstyled + TailwindCSS.

Improve this question
1

1 Answer 1

Reset to default
1

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

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

Supported from v4

@import "tailwindcss";

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:

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

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:

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:

npm install tailwindcss @tailwindcss/postcss postcss

postcss.config.mjs

export default {
  plugins: {
    "@tailwindcss/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.

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:

npm install tailwindcss@3
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.