Responsive breakpoints aren’t working

[YidirK]

I’m using Vike and Tailwind CSS v4 to build an SSG site. I’m having an issue with Tailwind, the responsive breakpoints aren’t working, and I can’t figure out why.
Do you have any idea what might be causing this?

PS: With Tailwind CSS v3, everything worked fine.

[BitWise-0x]

This is a common issue when migrating from Tailwind v3 to v4 — the architecture changed significantly. Here's how to fix it with Vike:

1. Install the v4 Vite plugin

Tailwind v4 has a dedicated Vite plugin (recommended for all Vite-based projects like Vike):

npm install tailwindcss @tailwindcss/vite

Remove old v3 PostCSS packages if you have them: autoprefixer, postcss, postcss-import — v4 handles these internally.

2. Update vite.config.ts

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

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

Remove any postcss.config.js or PostCSS config from your Vite config — the Vite plugin handles everything.

3. Update your CSS entry file

Replace the old v3 directives:

/* OLD v3 — remove these */
@tailwind base;
@tailwind components;
@tailwind utilities;

With:

/* NEW v4 */
@import "tailwindcss";

4. Add @source directives if needed

Tailwind v4 auto-detects classes through the Vite module graph instead of the old content array. If Vike's file structure puts templates in directories that aren't naturally part of the module graph, Tailwind won't find your classes (including responsive variants like md:, lg:, etc.).

Add explicit source paths in your CSS:

@import "tailwindcss";
@source "../pages/**/*.{js,ts,jsx,tsx,vue}";
@source "../components/**/*.{js,ts,jsx,tsx,vue}";

5. Delete tailwind.config.js

The old config file is no longer needed. If you had custom breakpoints, migrate them to the @theme directive:

@import "tailwindcss";

@theme {
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

(These are the defaults — you only need @theme if you customized them.)

6. Verify viewport meta tag

Make sure your HTML head includes:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Without this, media queries (which power responsive breakpoints) won't work correctly.

---

The migration guide has more details: https://tailwindcss.com/docs/upgrade-guide

[YidirK]

Actually, I had already done all that and everything was correct. But it was strange that it was displaying like that.
So I opened it in a clean browser and it worked normally. That’s when I realized the problem was coming from my browser.
I didn’t suspect it at first because Tailwind CSS v3 usually works fine for me. I removed some browser extensions and the issue was fixed.
I’m not exactly sure where the problem came from or how to explain it technically, but everything is working now.
Thank you very much for your response.