this was vite.config.js in version 3

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        home: 'src/pages/index.html',
        contact: 'src/pages/contact.html',
        order: 'src/pages/order.html',
      },
    },
    minify: 'terser', // Minify JS and CSS
    terserOptions: {
      compress: {
        drop_console: true, // Remove console logs in production
        drop_debugger: true, // Remove debugger statements
      },
    },
  },
  css: {
    postcss: {
     plugins: [tailwindcss(), require('autoprefixer')],
    },
  },
});

how to make this work with tailwind 4?

i'm also using scss:

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

@use 'variables';

body {
background: tomato
}

@layer base {
  html {
    font-feature-settings: 'cv11';
  }
}

[x-cloak] {
  display: none !important;
}

At the moment this solution isn't working. Thank you to however already have this working.

this was vite.config.js in version 3

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        home: 'src/pages/index.html',
        contact: 'src/pages/contact.html',
        order: 'src/pages/order.html',
      },
    },
    minify: 'terser', // Minify JS and CSS
    terserOptions: {
      compress: {
        drop_console: true, // Remove console logs in production
        drop_debugger: true, // Remove debugger statements
      },
    },
  },
  css: {
    postcss: {
     plugins: [tailwindcss(), require('autoprefixer')],
    },
  },
});

how to make this work with tailwind 4?

i'm also using scss:

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

@use 'variables';

body {
background: tomato
}

@layer base {
  html {
    font-feature-settings: 'cv11';
  }
}

[x-cloak] {
  display: none !important;
}

At the moment this solution isn't working. Thank you to however already have this working.

• tailwind-css

• "Not working". If you tell us what isn't working, how it should work, and what you've tried to solve the issue, we'd be happy to help. But without that, it's hard to assist. We can't read your mind, and without a clear reproduction, we can't guess the error message or what you're trying to achieve. – rozsazoltan Commented Jan 29 at 22:17
• Problem installing TailwindCSS with Vite, after "npx tailwindcss init -p" command or How to upgrade TailwindCSS? – rozsazoltan Commented Jan 29 at 22:19

1 Answer 1

As it is said in the docs, the TW config has been completely rebuilt : no more tailwind.config.js...

Instead, in your main CSS file, the first line you should write is @import "tailwindcss";

If you need to accurately indicate to TW where are the files to watch the way you did with TW3 through its file tailwind.config.js, as it is mentioned here https://github/tailwindlabs/tailwindcss/issues/15943, after the @import 'tailwindcss' you can specify @source './../templates/'; with your own path to the folder to watch.

Additionnaly, in your vite.config.js, you could write :

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [ tailwindcss() ]),
  ]
});

You may find more help on https://tailwindcss/docs/installation/using-vite

Finally, as you can see here https://tailwindcss/docs/theme, you will be able to setup the equivalent of the v3 tailwind.config.js in the first lines of your main CSS file, beginning with something like this :

@import 'tailwindcss';
@source './../templates/';


@theme {
  --breakpoint-tablet: 1024px;
  --breakpoint-laptop: 1440px;
  --breakpoint-desktop: 1920px;
  /* And so on... */
}

I hope this will help