How to prefix all Tailwind-generated classes and CSS variables (V4.0)

[vasudevsumcircle]

I am unable to add prefix (tw-) to all tailwind classes . I have refer the documentation(v4.0) but the listed way is not working.

I have attached my tailwind.widget.config.js file

/** @type {import('tailwindcss').Config} /
export default {
darkMode: "class",
content: [
"./pages/**/.{ts,tsx}",
"./components//*.{ts,tsx}",
"./app//.{ts,tsx}",
"./src/**/.{ts,tsx}",
],
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {},
},
prefix:'tw-',
plugins: [require("tailwindcss-animate")],
};

[wongjn]

Your tailwind.widget.config.js is for v3. Consider following the documentation you screenshotted to apply prefix tw:. Note: you can't have tw- prefix in v4.

[vasudevsumcircle]

Thanks its works for me