Make Tailwind Desktop First

I have set my tailwind configuration to be desktop first:

screens: {
        xl: { max: "1279px" },
        // => @media (max-width: 1279px) { ... }
        sm: { max: "639px" },
        // => @media (max-width: 639px) { ... }
        md: { max: "767px" },
        // => @media (max-width: 767px) { ... }
        lg: { max: "1023px" },
        // => @media (max-width: 1023px) { ... }
      },

screens: {
        xl: { max: "1279px" },
        // => @media (max-width: 1279px) { ... }
        sm: { max: "639px" },
        // => @media (max-width: 639px) { ... }
        md: { max: "767px" },
        // => @media (max-width: 767px) { ... }
        lg: { max: "1023px" },
        // => @media (max-width: 1023px) { ... }
      },

But the problem is that tailwind generates the ouput from smaller screens first to larger. Making Larger screens overwrite smaller ones, which defeats the purpose. Has anyone ever tried making tailwind generate large screen first? Thank you.

5 Replies

Nibelung ValestiOP•6mo ago

In my situation, I cannot overwrite an lg:text-4xl with sm:text-xl which is a desktop approach of doing it. Is it impossible to do desktop first approach in tailwind?

lko•6mo ago

I've never tried but why do you want to convert it into desktop first?

Nibelung ValestiOP•6mo ago

Because I'm doing a desktop-first approach now, client want to see the desktop first, so I approached it that way.

lko•6mo ago

I usually just treat it as if it was deskltop first, and then when I do mobile I just change classes to lg:thing before relative after lg:relative absolute

Nibelung ValestiOP•6mo ago

hmmm maybe I can do that It's kinda a harder solution, but I think it can work. Ohhh. I think your solution works and it follow tailwind approach, silly me This really helped me, thank you. I wish I had asked earlier before wasting hours lol

Gaming

Programming

Make Tailwind Desktop First