🐛 BUG: tailwind media queries are in the wrong order on astro dev when using custom style.css

[oliverpool]

What version of astro are you using?

1.0.0-rc.7

Are you using an SSR adapter? If so, which one?

none

What package manager are you using?

yarn

What operating system are you using?

archlinux

Describe the Bug

I have an astro site with tailwind and a custom style.css file like this:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
   ...
}

which is imported in my main layout like this:

    <style is:global>
        @import './style.css';
    </style>

Some generated media-queries are in the wrong order when running astro dev (on build everything seems fine).
I tried the various RC and apparently this happens since RC4 (RC3 has no issue with this setup).
Looking at the changelog, it could be related to #4115

It is also possible that my setup is wrong (when I add applyBaseStyles: false to the config, no media-queries is working at all).

When trying to create a reproducible example, I realized, that this happens only on layouts/main.astro (the same classes on pages/index.astro don't have this issue):

• https://github-hwexlu--3000.local-corp.webcontainer.io the text is responsive, as expected
• https://github-hwexlu--3000.local-corp.webcontainer.io/markdown-page the text is not responsive

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-hwexlu?file=src/pages/markdown-page.md

Participation

• I am willing to submit a pull request for this issue.

[oliverpool]

using a direct import

import './style.css';

instead of a style import

    <style is:global>
        @import './style.css';
    </style>

and switching applyBaseStyles: false seems to work fine!

So it seems that my setup was wrong.

[femtozer]

I still have the issue with astro build.
I'm using Astro 1.4.2.
The media queries are in the wrong order in the generated css file:

@media (min-width: 768px) {
  ...
}

@media (min-width: 640px) {
  ...
}

@media (min-width: 1024px) {
  ...
}

@media (min-width: 1280px) {
 ...
}

This is working well with astro devthough.

[hayhaydz]

Also having this same issue with building Tailwind classes in Astro ^1.4.2, I'm using a custom set of screen sizes:

screens: {
	tablet: { 'max': '1024px' },
	mobile: { 'max': '720px' },
},

This is compiling out as:

@media (min-width: 720px) {
  ...
}
@media (min-width: 1024px) {
  ...
}

Which is creating problems for certain parts of the website.

[TheGlenn88]

@femtozer @hayhaydz are you using the astro-compress plugin? I've noticed that messes up media query ordering...

I removed css compressing like:

compress({
    css: false,
    html: true,
    img: true,
    js: true,
    svg: true,
  })

https://github.com/astro-community/astro-compress

[xtealer]

Is there a fix for this that keeps compress css functionality?

[NikolaRHristov]

I still have the issue with astro build. I'm using Astro 1.4.2. The media queries are in the wrong order in the generated css file:

@media (min-width: 768px) {
  ...
}

@media (min-width: 640px) {
  ...
}

@media (min-width: 1024px) {
  ...
}

@media (min-width: 1280px) {
 ...
}

This is working well with astro devthough.

This is the correct order. Media queries are ordered by mobile first, notice the min-width.

[femtozer]

This is the correct order. Media queries are ordered by mobile first, notice the min-width.

Did you notice that it's not in ascending order? 640px is after 768px in the code you quoted.