1

How is it possible to change the spacing based on media queries? In tailwind.config I defined my custom spacing

module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    screens: {
      sm: "640px",
      // => @media (min-width: 640px) { ... }

      md: "768px",
      // => @media (min-width: 768px) { ... }

      lg: "1024px",
      // => @media (min-width: 1024px) { ... }

      xl: "1280px",
      // => @media (min-width: 1280px) { ... }
    },
    spacing: {
      0: "0px",
      1: "5px",
      2: "10px",
      3: "15px",
      4: "20px",
      5: "25px",
      6: "30px",
    },
    extend: {
      colors: {
        "blue": "#243c5a",
      },
    },
    fontSize: {},
  },
  plugins: [],
};

I know it's possible in this way:

<div clasname="p-1 md:p2">CONTENT</div>

But I want to change something like: when screen @lg p-6 to be 30, when screen @md p-6=28, when @sm=24, and so on for others spacing.

Dazzy
  • 61
  • 2
  • 10

1 Answers1

3

This is not the best way to do it. If you need to have more options you can make it like this:

    spacing: {
      0: "0px",
      1: "5px",
      2: "10px",
      3: "15px",
      4: "20px",
      4.5: "24px",
      5: "25px",
      5.5: "28px",
      6: "30px",
    },

and then use:

<div clasname="p-4.5 md:p-5.5 lg:p-6">CONTENT</div>
Werthis
  • 557
  • 3
  • 15