SASS Integration with PostCSS and Tailwind CSS v4 is not working as expected

[RahulMoral]

Hello,

I am having trouble configuring a project to work with both SASS and Tailwind CSS v4 using Vite and Laravel. Based on the documentation, it seems the recommended approach of using a dedicated CSS file for Tailwind directives is the way forward, but the integration with an existing SCSS-based workflow is causing issues.

My project has the following setup:

• Vite v7.0.6
• Laravel v12.21.0
• SCSS/SASS v1.90.0
• Tailwind CSS v4 v4.1.11

I followed the new recommended approach of using a plain CSS file for @tailwind directives and then importing it in vite.config.js. However, the custom rules defined in tailwind.config.js (e.g., custom colors or breakpoints) are not being applied, and the SCSS compiler seems to be ignoring the Tailwind directives entirely.

Here is a summary of my configuration files:

vite.config.js

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

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/css/app.css', 'resources/scss/app.scss', 'resources/js/app.js'],
      refresh: true,
    }),
    vue({
      template: {
        transformAssetUrls: {
          base: null,
          includeAbsolute: false,
        },
      },
    }),
  ],
});

postcss.config.cjs

module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {},
  },
};

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './resources/views/**/*.blade.php',
    './resources/js/**/*.{js,vue}',
  ],
  theme: {
    extend: {
      colors: {
        gray_10: "#202056"
      }
    },
  },
  plugins: [],
};

resources/css/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

I believe this may be a conflict between the new Tailwind v4 approach and how Vite and SASS handle their build processes. Any guidance on how to properly integrate these tools would be greatly appreciated. Thank you.

[wongjn]

In v4, Tailwind does not use the tailwind.config.js. Configuration is done in CSS. Furthermore, in the CSS file, you'd do @import "tailwindcss"; instead of the @tailwind directives. Consider reviewing the installation steps for Laravel-Vite for details.

Also note, as per the documentation:

Tailwind CSS v4.0 is a full-featured CSS build tool designed for a specific workflow, and is not designed to be used with CSS preprocessors like Sass, Less, or Stylus.

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.

[RahulMoral]

@wongjn Thanks for your reply. I understand.