Set custom sizes for width and height in Tailwind-CodePudding

I want to set A4 size (210 x 297 mm) in Tailwind. I guess what I'm looking for is something like below

  theme: {
    extend: {
      spacing: {
        width: {
          a4: "210mm",
        },
        height: {
          a4: "297mm"
        }
      },
    },

<div >
</div>

CodePudding user response：

Per docs You should have been written like this:

spacing: {
  width: {
    'a4': "210mm",
  },
  height: {
    'a4': "297mm"
  }
},

Or using Arbitrary values If you don't want to extend. If your using vscode install Tailwind CSS IntelliSense for autocompleting.

CodePudding user response：

custom size（number）

custom is usually in .w-{number} and .w-px two type ，at number In terms of what rem do Relative unit，px Is the absolute unit of pixels 。In rem, each unit is 0.25rem, or 1/4 of a font size.

like this the classname like w-1

<div ></div>

.w-1 { width: 1rem; }

CodePudding user response：

Spacing is kinda a group of sizes

By default the spacing scale is inherited by the padding, margin, width, height, maxHeight, gap, inset, space, and translate core plugins.

So when you're register spacing like

 theme: {
    extend: {
      spacing: {
        a4: '210mm',
      },
    },

You will be able to use p-a4, m-a4, h-a4, w-a4 etc. All of them will have size of 210mm

If you wish to split sizes, no need in spacing key - just pass width and height

 theme: {
    extend: {
      width: {
         a4: '210mm',
      },
      height: {
        a4: '297mm',
      },
    },