Using Tailwind CSS to set the margin of an element at certain breakpoints is not functioning as expected

Question

Using Tailwind CSS to set the margin of an element at certain breakpoints is not functioning as expected

I attempted to customize the margin of a div element at specific screen sizes by using a {screen}: prefix, but it did not have the desired effect. Here is what I tried:

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

Upon inspecting, I noticed that only the my-8 class seemed to be working correctly.

https://i.sstatic.net/SOTdR.png

All classes from Tailwind, including flex for responsiveness, function as expected. However, the responsive margin (padding) does not seem to apply. My project utilizes Next.js and Tailwind CSS.

css plugins themes next.js tailwind-css

Answer 1

Answer №1

Apologies, but I managed to solve the issue on my own. The problem was related to the tailwind config settings.

Since this project was not created from scratch, I didn't have the opportunity to review the configuration initially.

I was able to resolve it by adjusting the margin variant as follows:

// 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 November 2021, Tailwind introduced version 3.0 with significant changes.

One of the notable changes is the removal of the variants section from your tailwind.config.js file.

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

Answer 2

Apologies, but I managed to solve the issue on my own. The problem was related to the tailwind config settings.

Since this project was not created from scratch, I didn't have the opportunity to review the configuration initially.

I was able to resolve it by adjusting the margin variant as follows:

// 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 November 2021, Tailwind introduced version 3.0 with significant changes.

One of the notable changes is the removal of the variants section from your tailwind.config.js file.

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

Using Tailwind CSS to set the margin of an element at certain breakpoints is not functioning as expected

Answer №1

Similar questions

What are the steps for executing functions that exceed 10 seconds on Vercel?

What is the most effective way to implement a CSS stylesheet on a particular individual element?

The CSS overflow scroller trims the excess background color

Having trouble accessing env variables from React Component in Next.js?

Bootstrap Model Footer Button Alignment

Incorporating both Tailwind CSS and Bootstrap in a Laravel project for a dynamic and stylish

How to implement loading an external script upon a page component being loaded in NextJS

What is the best way to use CSS to ensure that dynamic, data-driven characters can be properly displayed within a div

Setting up CSS module class names in a Vue project using Vite js configuration

What exactly is the significance of "utilizing a universal class name"?

triangle shape filled with a gradient that transitions between two colors

When the filter feGaussianBlur is applied to an SVG circle, it disappears on Safari but not on Chrome

Layering one canvas on top of another

Guidelines for aligning a form in the middle of the screen (positioned between the navigation bar and footer

Expand row size in grid for certain row and item

Can a button be connected to both navigate to another webpage and trigger a modal to appear on it simultaneously?

IE9 is causing a bizarre problem where the entire page is suddenly jumping. It's

What is the method by which Next API Route manages multiple simultaneous requests?

Heading made of ribbon without increasing the scrolling space

The response from getStaticProps in Next.js is not valid