vite with scss not working with tailwind

[idbd1]

I want to introduce tailwind in the project and use it in classes, but keep the existing scss.

I've followed the documentation, but tailwind doesn't get applied.

"sass": "^1.89.0",
"tailwindcss": "^4.1.7",
"autoprefixer": "^10.4.21",
"vite": "^5.4.12",

tailwind.config.js
/** @type {import('tailwindcss').Config} */ module.exports = { content: ['./index.html', './src/**/*.{js,ts,jsx,tsx,html}'], theme: { extend: {}, }, plugins: [], };

postcss.cofnig.js
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, };

in src we have app.html that doesn't reference css, but in App.tsx we import './app.scss'

in app.scss
@tailwind base; @tailwind components; @tailwind utilities; ...

Hello Tailwind + SCSS

there is no visual change to the text. not sure what else to try.

[wongjn]

You may have followed outdated documentation. You shouldn't need a tailwind.config.js or postcss.config.js file (assuming you misspelled this). As per the documentation, you should have a vite.config.js file:

import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

With your entry app.scss having (slightly different from the documentation because of Sass):

@import "tailwindcss/index.css";

[idbd1]

hi @wongjn thanks for your response!

I followed your suggestions, but that didn't work, until I import "tailwindcss/index.css"; in App.tsx. I'm not loving this solution, but for now it's the only one that worked.

[idbd1]

@wongjn I'm kind of stuck with the setup as the custom styling doesn't work.

the only way I can import tailwind in the app is by importing import 'tailwindcss/index.css'; in index.tsx or other react components.

@import url('tailwindcss/index.css'); <--- this doesn't work in app.scss, nothing what I tried so far worked other than the import above.

The problem is that the custom styling also doesn't work. Do you have any recommendations on how to make it work?

[wongjn]

Consider not using Sass at all with Tailwind, as per the documentation:

Think of Tailwind CSS itself as your preprocessor — you shouldn't use Tailwind with Sass for the same reason you wouldn't use Sass with Stylus.