vite with scss not working with tailwind

[dbie999]

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";

[dbie999]

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.