I"m trying to use tailwind on my scss file on laravel, but for some reason the classes are not being applied.
Thats my app.scss: "@tailwind base; @tailwind components; @tailwind utilities;
.dale { @apply text-red-200 text-2xl; } ".
My vite.config.js:"import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; import tailwindcss from '@tailwindcss/vite';
export default defineConfig({ plugins: [ laravel({ input: [ 'resources/css/app.css', 'resources/scss/app.scss', 'resources/js/app.js', 'resources/views/*.blade' ], refresh: true, }), tailwindcss(), ], }); "
and my blade file where i"m using this: "@vite(['resources/scss/app.scss', 'resources/css/app.css', 'resources/js/app.js'])" and a div with class="dale" but the text-2xl and color red are not being applied, it only works when i use css instead of tailwind in the app.scss file
I would suggest not using scss at all, you are better of sticking to tailwind as is.
In your blade you should reference the css file and not the scss. Scss needs to be converted to css before it can be loaded in the browser.
Tailwind is to remove the need of writing custom css and thus make using scss totally unnecessary.
Ok, thx for the awnser :)
The issue is that Tailwind’s @tailwind and @apply directives are not processed by SCSS (.scss) files—they only work in plain CSS files (.css or .pcss). SCSS preprocessors do not understand Tailwind’s custom directives, so they are ignored or cause errors.
How to fix:
Use a plain CSS file for Tailwind directives and utilities.
Move your Tailwind-related code to app.css instead of app.scss.
If you need to write custom CSS with Tailwind, use PostCSS syntax, not SCSS.
Example:
Your resources/css/app.css should look like:
@tailwind base;
@tailwind components;
@tailwind utilities;
.dale {
@apply text-red-200 text-2xl;
}
Update your vite.config.js input:
You only need to include app.css (not both app.css and app.scss for Tailwind):
input: [
'resources/css/app.css',
'resources/js/app.js',
// ...other files
],
In your Blade file:
@vite(['resources/css/app.css', 'resources/js/app.js'])
If you need to use SCSS for other custom styles:
app.css.Summary:
Tailwind’s @tailwind and @apply do not work in .scss files. Use a plain CSS file for Tailwind, and only use SCSS for non-Tailwind custom styles.
References:
Please or to participate in this conversation.