Using Vite, Vue, Talwind CSS V4 and SCSS

[martinschaible]

Hello

I followed any instructions, but the the tailwind classes will never show up.

In my file main.scss i import tailwindcss:

@layer theme;
@import "../../../node_modules/tailwindcss/theme.css";
@import "../../../node_modules/tailwindcss/preflight.css";
@import "../../../node_modules/tailwindcss/utilities.css";

A simple import like described @import tailwindcss does not work anyway.

The file vite.config.js looks like in the docs:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    tailwindcss(),
  ],
})

The import of the main.scss looks like this:

import { createApp } from 'vue'
import App from './App.vue'
import './assets/scss/main.scss';

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

So far so good.

I can create new css and scss files with classes and they show up. So an simple @import and also the compiling of the scss stuff works.

Why i can not import the Tailwind CSS?

Thanks!

Martin

[wongjn]

Tailwind should not be used with Sass, see: https://tailwindcss.com/docs/compatibility#sass-less-and-stylus.

[outdoorsman]

I've read that I shouldn't be using Sass, but what about my case where I'm using both Bootstrap 5 and Tailwind 4 in the same project? Bootstrap 5 uses Sass and I've also made customizations. Can I use only CSS files for all Tailwind 4 files and SCSS files for my Bootstrap 5 stuff and then combine everything in my main.scss file, or does it have to be main.css? This is confusing.