Tailwind media queries for padding

JeanJacquesGourdin 0
Viewed 46

I cannot make a simple media query for the padding of an element. I work with NextJs but it is not the problem because my custom break points work for everything else but this :

When I have a class like className="p-2 sml:p-4" the p-2 overwrites the other class. I think it has to do with the !important attribute given to p-2 by tailwind.

How to make this simple thing ? What am I missing ?

PS: I repeat, this problem has nothing to do with the media query itself, className="bg-black sml:bg-white" works perfectly fine. The sml: is my custom media query that is triggered at 576px, and I repeat, works very well.

Edit: Minimal code to reproduce

<main className="p-2 sml:p-4">
  <div className="w-full h-12 bg-black"/>
</main>

Edit: Config file for tailwind version 3.1.2

/** @type {import('tailwindcss').Config} */
module.exports = {
  important: false,
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  plugins: [
    require('tw-elements/dist/plugin')
  ],
  darkMode: 'class',
  theme: {
    screens: {
      'sml': '576px',
      'mdm': '768px',
      'nrm': '992px',
      'lrg': '1280px',
      'max': '1564px',
    },
    extend: {
    },
  },
  plugins: [],
}
next.js tailwind-css
1 Answers

As you said, the problem is that the !important attribute is added to the p-2 class. You can disable whether or not Tailwind's utilities should be marked with !important in your tailwind.config.js file:

module.exports = {
  important: false,
}

Reference: https://tailwindcss.com/docs/configuration

isaks0
Related