Tailwind lg breakpoint not working after deploy but fine locally

Question

When running my current Astro.build project locally using astro dev, styling works as expected.

After building and deploying the site though – either with astro build and astro preview or live on cloudflare pages – the lg breakpoint does not apply.

As you can see, on the live site, the md breakpoint (min-width: 768px) is applied, even though the screen is wide enough for the lg breakpoint condition to the fulfilled. The lg breakpoint calls for min-width: 1024px. Running document.body.clientWidth yields 1920. As such, the lg breakpoint, instead of the md breakpoint should be applied.

This behavior is the same on Firefox and Chrome. Disabling compression does not fix the issue. Deployment works with Cloudflare pages CI/CD. This issue appears on all built commits since replacing the static width with a responsive one.

I don't know whether this issue stems from Astro, Tailwind, Vite, Cloudflare pages or some other part of my application.

Edit: seems like this is not a Tailwind/CSS issue. Reproducing the elements on tailwind play does work as expected (eg. as during live testing). I suppose the error comes from a build stage. https://play.tailwindcss.com/wnVcYAD5B2

Edit:

I found the root cause of the issue. I do not yet know how to fix it.

On the dev server, media queries and their subsequent classes are defined in descending order.

@media (min-width: 640px) {
  /* sm breakpoint */
  /* ... */
}
@media (min-width: 768px) {
  /* md breakpoint */
  /* ... */
}
@media (min-width: 1024px) {
  /* lg breakpoint */
  /* ... */
}
/* And so on */

The built CSS has the media queries in a random (perhaps order of first use?) order.

@media (min-width: 1024px) {
  /* lg breakpoint */
  /* ... */
}
@media (min-width: 640px) {
  /* sm breakpoint */
  /* ... */
}
@media (min-width: 768px) {
  /* md breakpoint */
  /* ... */
}

If my CSS knowledge is correct, the md breakpoint is used in the built project since they are the bottom most, active classes in the CSS.

Would purging the CSS help? (`purge: ['./src/**/*.{astro,js,jsx,ts,tsx,vue}', './public/**/*.html'],` in `tailwind.config.js`). Is there any difference between local and live Tailwind CSS version? Between the `dist` content locally and on live? — VonC, May 14 '23 at 05:56
Adding the purge option did not work sadly. I'm currently checking out where the live dev server saves it's files to. Will compare them once I have found out. Building the project locally results in the same issue as live. — J Heschl, May 15 '23 at 07:48
OK, double-check your `astro.config.mjs` and `postcss.config.js`. Make sure you're importing your stylesheets correctly in your Astro components. If you're using `@apply` directive or custom classes in your CSS, make sure they're defined and imported correctly. — VonC, May 15 '23 at 08:43

VonC · Accepted Answer · 2023-05-15T17:14:05.150

In CSS, if two rules are equally specific, the one that comes last will take precedence. This is why you're seeing the md breakpoint styles instead of the lg ones when your screen is wider than 1024px in your built project.
The md breakpoint comes after the lg breakpoint in your built CSS, so its rules are overriding the lg rules.

The order of media queries and their subsequent classes should be in ascending order, which is the correct behavior you observed in your development environment. The issue is happening during the build process.

One possible solution could be to ensure CSS is sorted properly after the build process. This can be achieved by using a PostCSS plugin like postcss-sort-media-queries (use npm install postcss-sort-media-queries --save-dev or yarn add postcss-sort-media-queries --dev to install it).

Update your postcss.config.cjs (PostCSS) file to use postcss-sort-media-queries:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('postcss-sort-media-queries'),
  ],
};

After you've made these changes, try building your project again and check if the media queries are sorted properly in the built CSS.

I had to name the configuration file `postcss.config.cjs` as per Astro documentation [1]. After that, it worked. Thank you for your help! [1] https://docs.astro.build/en/guides/styling/#postcss — J Heschl, May 15 '23 at 15:01
@jheschl17 Great, well done! I have updated the answer accordingly. — VonC, May 15 '23 at 17:14

Tailwind lg breakpoint not working after deploy but fine locally

1 Answers1