Created
September 4, 2020 17:55
-
-
Save heytulsiprasad/e8bae1eba7b90ef66b8b1b1ae0861d96 to your computer and use it in GitHub Desktop.
Config tailwind to desktop first approach
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. ❤️
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Containers will not work as expected unless you add something like this to your global stylesheet: