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>
