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: [],
};

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