Search code examples
vue.jstailwind-cssviteprimevue

TailwindCSS styling is not applied

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.

Solution

  • 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