CODEWITHSUNDEEP
csspluginsthemesnext.jstailwind-css
hotcakedev
hotcakedev

Reputation: 2504

margin of an element at specific breakpoints doesn't work in Tailwind

I was trying to set margin of an div element at specific breakpoints by adding a {screen}: prefix but it won't work. What I tried is below;

<div className={'flex justify-center'}>
  <div className={'w-full my-8 sm:my-20 md:my-48'}>
    <div {...props}>
      {children}
    </div>
  </div>
</div>

Inspecting mode, I could identify that only my-8 class works.

enter image description here

All classes of Tailwind work well and flex for responsive works as well, but the margin(padding) for responsive doesn't work. I use Next.js and Tailwind CSS.

Upvotes: 4

Views: 9879

Answers (1)

hotcakedev
hotcakedev

Reputation: 2504

Sorry, but I figured it out by myself. It's because of tailwind config.

Since it's not the project from scratch, I had no chance to check the config.

So I figured it out by modifying margin variant to:

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     margin: ['hover'],
+     margin: ['responsive', 'hover'],
    }
  }

reference: https://tailwindcss.com/docs/margin#responsive-and-pseudo-class-variants

UPDATE 11/2021

In Nov, 2021, Tailwind released version 3.0 and it has some breaking changes.

One of the changes, you can remove variants section from your tailwind.config.js file.

Reference: https://tailwindcss.com/docs/upgrade-guide#remove-variant-configuration

Upvotes: 6

Related Questions