I want to create some default spacings that I can use on many different places inside of my project that uses Tailwind CSS.

One of the ways to do it is this <div className="mb-4 sm:mb-6 md:mb-8 lg:mb-10">Random Content</div>.

But I would much rather want to have a defined spacing somewhere that I can use like mb-custom or py-custom which would use my custom values that would be different on each of the screen sizes. For example mb-custom would have the value of 1rem on the very small screen, the value of 1.5rem on sm size, the value of 2rem on md size and the value of 2.5rem on lg size. Now the thing that I found to solve this problem is this code snippet:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    spacing: {
      sm: '8px',
      md: '12px',
      lg: '16px',
      xl: '24px',
    }
  }
}
 

And it’s on this page: https://tailwindcss.com/docs/customizing-spacing

BUT the thing is that this way of doing it only allows me to add one specific value to a spacing prefix that I define. So I won’t be able to have different values on different screen widths. Am I maybe missing something in the documentation or is there a better way to do it and have different values on different screen sizes?