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.
Share Improve this question asked Jan 29 at 20:49 ZokorZokor 1751 silver badge4 bronze badges 2- "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
Reset to default 0As 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