Skip to content

Instantly share code, notes, and snippets.

@Lelectrolux
Forked from Akryum/responsive-menu.html
Created January 6, 2021 18:07
Show Gist options
  • Save Lelectrolux/be47b168c396361382694d5f7638fce1 to your computer and use it in GitHub Desktop.
Save Lelectrolux/be47b168c396361382694d5f7638fce1 to your computer and use it in GitHub Desktop.
Tailwind negate responsive breakpoints
<div class="flex !md:flex-col items-center !md:space-y-6 md:space-x-6">
<button>Menu button 1</button>
<button>Menu button 2</button>
<button>Menu button 3</button>
</div>
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
extend: {
screens: Object.keys(defaultTheme.screens).reduce((obj, key) => {
const [rawMin] = defaultTheme.screens[key].split('px')
const max = parseInt(rawMin) - 1
obj[`!${key}`] = { max: `${max}px` }
return obj
}, {}),
},
},
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment