Scale

We use Tailwind's spacing scale to maintain consistent spacing throughout our applications. The scale is based on a 4px (0.25rem) unit, which helps create a harmonious visual rhythm.

Example

For example, to add a padding of 16px, you would use the token p-4 since 4 units of our scale equals 16px (4 × 4px = 16px).

4 = 16px

export default () => (
  <div className="bg-gray-2 rounded-lg inline-block">
    <div className="m-4 bg-gray-4 rounded-lg">
      <div className="p-4 border border-gray-6 rounded text-sm text-gray-11 text-center">
        4 = 16px
      </div>
    </div>
  </div>
)

Resources

For a complete reference of all available spacing values and how to use them, refer to the Tailwind documentation.