How do I customize the spacing scale in Tailwind?

Ask any question about Tailwind CSS here... and get an instant response.

Post this Question & Answer:

How do I customize the spacing scale in Tailwind?

Asked on Oct 14, 2025

Answer

Tailwind CSS allows you to customize the spacing scale through its configuration file, enabling you to define your own values for padding, margin, and gap utilities. This is done by extending the default theme settings.

Example Concept: To customize the spacing scale in Tailwind CSS, you modify the `tailwind.config.js` file. Within the `theme` property, extend the `spacing` key with your custom values. This allows you to add new spacing sizes or override existing ones, which are then available across all spacing-related utilities like `p-`, `m-`, and `gap-`.

Additional Comment:

Open the `tailwind.config.js` file in your project.
Use the `extend` key under `theme` to add or modify the `spacing` values.
For example, adding `{ '72': '18rem' }` allows you to use `p-72`, `m-72`, etc.
Ensure your custom values are consistent with your design requirements.
Run your build process to see the changes reflected in your project.

✅ Answered with Tailwind CSS best practices.

Ask any question about Tailwind CSS here... and get an instant response.