Skip to content

Instantly share code, notes, and snippets.

@heytulsiprasad
Created September 4, 2020 17:55
Show Gist options
  • Save heytulsiprasad/e8bae1eba7b90ef66b8b1b1ae0861d96 to your computer and use it in GitHub Desktop.
Save heytulsiprasad/e8bae1eba7b90ef66b8b1b1ae0861d96 to your computer and use it in GitHub Desktop.
Config tailwind to desktop first approach
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: [],
};
@HamzaHamani
Copy link

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

@cyrus01337
Copy link

cyrus01337 commented Dec 17, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment