Config tailwind to desktop first approach

tailwind.js

module.exports = {
	theme: {
		extend: {},
		screens: {
			xl: { max: "1279px" },
			// => @media (max-width: 1279px) { ... }

			lg: { max: "1023px" },
			// => @media (max-width: 1023px) { ... }

			md: { max: "767px" },
			// => @media (max-width: 767px) { ... }

			sm: { max: "639px" },
			// => @media (max-width: 639px) { ... }
		},
	},
	variants: {},
	plugins: [],
};

@eroffa It's been a while since you've posted this so my bad if it's too late to ask.

Could you explain why you made the changes that you did to the original config?

he basically added more breakpoints for using max-width 'pc first' instead of the original approach in tailwind with mix-with 'mobile first'

he basically added more breakpoints for using max-width 'pc first' instead of the original approach in tailwind with mix-with 'mobile first'

Appreciate you. ❤️

We can also use (Fixed-range) Breakpoints:

module.exports = {
  theme: {
    screens: {
      'sm': {'min': '640px', 'max': '767px'},
      // => @media (min-width: 640px and max-width: 767px) { ... }

      'md': {'min': '768px', 'max': '1023px'},
      // => @media (min-width: 768px and max-width: 1023px) { ... }

      'lg': {'min': '1024px', 'max': '1279px'},
      // => @media (min-width: 1024px and max-width: 1279px) { ... }

      'xl': {'min': '1280px', 'max': '1535px'},
      // => @media (min-width: 1280px and max-width: 1535px) { ... }

      '2xl': {'min': '1536px'},
      // => @media (min-width: 1536px) { ... }
    },
  }
}

Arbitrary value

<div class="min-[320px]:text-center max-[600px]:bg-sky-300">
  Hello world
</div>

Wrote a guide for desktop-first Tailwind here: https://www.subframe.com/blog/how-to-make-tailwind-desktop-first

Also recommend naming your breakpoints like so, especially if you're working on a web app:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      screens: {
        mobile: { max: "479px" },
        // => @media (max-width: 479px) { ... }

        tablet: { max: "767px" },
        // => @media (max-width: 767px) { ... }

        desktop: { min: "768px" },
        // => @media (min-width: 768px) { ... }
      },
    },
  },
}

@izhan how can we make this config in tailwind 4 with the configuration in css file please

@izhan how can we make this config in tailwind 4 with the configuration in css file please

@import "tailwindcss";

@custom-variant 2xl (@media (max-width: 96rem));
@custom-variant xl (@media (max-width: 80rem));
@custom-variant lg (@media (max-width: 64rem));
@custom-variant md (@media (max-width: 48rem));
@custom-variant sm (@media (max-width: 40rem));

@izhan thks

Thanks

@izhan how can we make this config in tailwind 4 with the configuration in css file please

@import "tailwindcss";

@custom-variant 2xl (@media (max-width: 96rem));
@custom-variant xl (@media (max-width: 80rem));
@custom-variant lg (@media (max-width: 64rem));
@custom-variant md (@media (max-width: 48rem));
@custom-variant sm (@media (max-width: 40rem));

This is it