Configuring Vite for Tailwind CSS 4 with SCSS: Build process not functioning

Other Questions JavaScript
1

Hey everyone! I’m having trouble getting my build process to work with the latest Tailwind CSS 4. I’ve been using Vite as my build tool, but the setup that worked for version 3 isn’t cutting it anymore.

Here’s what my buildConfig.js looks like now:

import { configureBuilder } from 'builderjs';

export default configureBuilder({
  output: {
    bundleConfig: {
      entryPoints: {
        main: 'src/views/main.html',
        about: 'src/views/about.html',
        products: 'src/views/products.html'
      }
    },
    optimize: 'minifier',
    minifierSettings: {
      shrink: {
        removeLogging: true,
        removeDebugging: true
      }
    }
  },
  styles: {
    preprocessor: {
      plugins: [tailwindProcessor(), addVendorPrefixes()]
    }
  }
});

I’m also using SCSS with Tailwind. Here’s a snippet of my main style file:

@import 'tailwindcss/core';
@import 'tailwindcss/modules';
@import 'tailwindcss/addons';

@import 'custom-vars';

html {
  background: coral;
}

@layer defaults {
  body {
    font-kerning: normal;
  }
}

.hidden-element {
  display: none !important;
}

Can anyone help me figure out how to make this work with Tailwind 4? Thanks in advance for any tips or solutions!

2

hey buddy, i had similar issues when upgrading to tailwind 4. try updating ur tailwindProcessor() function - they changed some stuff in the new version. also, double check ur imports in the scss file. might need to tweak those too. good luck!

3

I encountered similar issues when upgrading to Tailwind 4 with Vite. One crucial step is updating your PostCSS configuration. In your project root, create or modify a postcss.config.js file:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Also, ensure your Vite config (vite.config.js) includes PostCSS:

import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    postcss: './postcss.config.js',
  }
})

These changes should help Vite properly process Tailwind 4. Remember to run ‘npm install -D tailwindcss@latest postcss autoprefixer’ to get the latest versions. If issues persist, try clearing your build cache and node_modules, then reinstalling dependencies.

4

I’ve been through this exact headache with Tailwind 4 and Vite. The key is adjusting your build config and SCSS setup. In your buildConfig.js, try replacing tailwindProcessor() with tailwind({ config: ‘./tailwind.config.js’ }). Make sure you’ve got a separate tailwind.config.js file set up.

For your SCSS, the import structure has changed. Try this instead:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Also, double-check your package.json to ensure all dependencies are up to date. Tailwind 4 has some new peer dependencies that might trip things up if they’re not properly installed.

Lastly, run ‘npx tailwindcss init’ to generate a fresh config file if you haven’t already. This sorted out most of my issues when upgrading. Hope this helps!