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

Improvement

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    screens: {
      '2xl': {'max': '1535px'},
      'xl': {'max': '1279px'},
      'lg': {'max': '1023px'},
      'md': {'max': '767px'},
      'sm': {'max': '639px'},
    },
    container: {
      center: true,
      padding: '2rem',
    },
  },
  plugins: [],
}

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

@layer base {
    .container {
        @apply max-w-[1535px] xl:max-w-[1279px] lg:max-w-[1023px] md:max-w-[767px] sm:max-w-[639px];
    }
}

@layer components {}
@layer utilities {}

very nice idea for indian work

@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?

@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. ❤️