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

@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