Tailwind CSS v4 introduces native CSS nesting and removes PostCSS from the default setup. This reduces the dependency tree and lowers build output sizes. It also drops support for some older browsers as a result.
I noticed layout and styling issues on older systems, specifically on browsers stuck on Windows 7. These systems can't upgrade to current versions of Chrome or Firefox. Even though the site is a portfolio targeted at developers, I didn’t want to ship something that fails to render at all. So I reverted to Tailwind v3.
Here are the steps.
Differences Between v4 and v3
v4 uses native CSS nesting. Older browsers don’t support it.
v4 doesn’t include PostCSS or Autoprefixer by default.
v3 uses PostCSS and Autoprefixer, which increases compatibility.
If you see broken layouts or missing styles after moving to v4, this is likely the cause.
Steps to Downgrade to Tailwind CSS v3
Step 1: Remove Tailwind CSS v4
npm uninstall tailwindcss
Step 2: Install Tailwind CSS v3
npm install -D tailwindcss@3.4.17 postcss autoprefixer
Step 3: Initialize Config Files
This sets up both tailwind.config.js and postcss.config.js.
Step 4: Update the Content Array
Tailwind needs to scan your files for class names. Adjust the config based on your setup. Keep in mind that if you have a /src/ directory you may need to adjust it.
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
]
Example with /src/
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
]
Step 5: Import Tailwind in Your CSS File
Add this to the beginning of CSS file (globals.css in Next) :
@tailwind base;
@tailwind components;
@tailwind utilities;
Conclusion
Tailwind v3 is more compatible with older environments. Downgrading avoids issues with unsupported CSS features. If compatibility is required, this is the practical solution.
