As you may know, tailwind 4 is now available. In v 3 and prior i always use this little snippet in my config file to get whatever spacing values i want. But how can i use it in v 4, since there is no config anymore?
spacing: {
...new Array(1001)
.fill()
.map((_, i) => i)
.reduce((acc, val) => {
acc[val] = `${val / 10}rem`;
return acc;
}, {}),
},
In Tailwind v4, any integer works where spacing values are used, with default configuration. For example, p-1 works, as well as p-123456789:
<script src="https://unpkg.com/@tailwindcss/[email protected]"></script>
<div class="mt-123 size-10 bg-red-500"><div>Though, to get the spacing scale to match up to your configuration where 10 = 1rem, you'd alter the --spacing theme variable:
@theme {
--spacing: 0.1rem;
}
<script src="https://unpkg.com/@tailwindcss/[email protected]"></script>
<style type="text/tailwindcss">
@theme {
--spacing: 0.1rem;
}
</style>
<div class="mt-123 size-10 bg-red-500"><div>
