Tailwindcss not working for Vite + Vue3 + Primevue

Question

I'm sry if I have a duplicate question. I went through the questions already in the forum, but still couldn't find a solution I haven't tried yet.

Problem explanation

I'm working on a test project right now, to get to get more familiar with different concepts. My project is uses Vue3, Vite, PrimeVue, Pinia, Supabase, (...) and tailwindcss. I added tailwindcss last and based on the documentation I added the configurations to my different config files - still the classes inside my vue components are not working (and tailwindcss isn't really there in dev mode).

After searching for hours over some days and trying different approaches (found on stackOverflow, documentations (...), including the postcss-load-config pakcage) without success, I thought posting here would maybe help to find me a solution. If anyone encountered the same problem or has more expertise on that matter I would be really greatful.

Test-Repo

I put the test project repo to public, because I thought it'd be easier that way: https://github.com/lyra-neska/pkmn-glossar

Tried options:

• importing tailwindcss via with @import, @layer or @tailwind
• adding tailwindcss to packages in vite.config, ts.config (...) directly
• adding from and to properties to tailwind.config.ts
• going with different preprocessor setups to configure tailwind and postcss
• trying to add postcss-load-config for and postcss.config.ts options

I'm sure I tried more, but I didn't list them all down

Expected outcome

• fix the tailwindcss issue to use tailwindcss classes in my vue components

Answer 1

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

npx tailwindcss init

this will create tailwind.config.js In your tailwind.config.js file, configure the purge option with the paths to all of your pages and components so Tailwind can tree-shake unused styles in production builds: add following code in it

module.exports = {
   purge: [],
   purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

Create a postcss.config.js file in your project's root directory with the following content:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
}

Create a CSS file (e.g., styles.css) in your src folder and include the following:

styles.css

/* src/styles.css */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Finally, ensure your CSS file is being imported in your ./src/main.js or index.js file:

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

restart dev server