主页 / coding / 问题 / 79583168
Accepted
Math
Asked: 2025-04-20 16:21:52 +0800 CST

Tailwind.css v4 中的自定义间距值

  • 772

您可能知道，Tailwind 4 现已发布。在 v3 及之前的版本中，我总是在配置文件中使用这段代码来获取所需的间距值。但是，由于 v4 中不再有配置文件，我该如何使用它呢？

spacing: {
  ...new Array(1001)
    .fill()
    .map((_, i) => i)
    .reduce((acc, val) => {
      acc[val] = `${val / 10}rem`;
      return acc;
    }, {}),
},
tailwind-css

1 个回答

  1. Best Answer

    在 Tailwind v4 中，任何整数都可以使用间距值，并采用默认配置。例如，p-1以及p-123456789：

    <script src="https://unpkg.com/@tailwindcss/[email protected]"></script>

<div class="mt-123 size-10 bg-red-500"><div>

    不过，为了使间距比例与您的配置相匹配10 = 1rem，您需要改变--spacing主题变量：

    @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>

    • 1

相关问题