DocsCustomizationsSpacing

Customizing Spacing

To customize spacing in TailAdmin, you can add your own values under the spacing key. This allows you to define your own units for padding, margin, and other spacing properties.

Note: The spacing values are inherited by padding, margin, width, height, maxHeight, and the rest of the pacing properties.

Here’s how you can add custom values:

module.exports = {
  theme: {
    spacing: {
        4.5: "1.125rem",
        5.5: "1.375rem",
        6.5: "1.625rem",
        7.5: "1.875rem",
        8.5: "2.125rem",
        9.5: "2.375rem",
        10.5: "2.625rem",
        11.5: "2.875rem",
        12.5: "3.125rem",
        13: "3.25rem",
        13.5: "3.375rem",
        14.5: "3.625rem",
        15: "3.75rem",
        ...
      },
  },
};

Using Customized Spacing

Once you have customized your spacing values, you can use them throughout your project.

For example, if you added a custom spacing value for 4.5, you can use it like this:

<div class="p-4.5">
  Custom padding of 1.125rem
</div>
<div class="m-5.5">
  Custom margin of 1.375rem
</div>

This Tailwind CSS flexible system allows you to easily apply custom spacing values to all elements across your TailAdmin project.

ColorComponents