Tailwind CSS 如何编写像素完美的设计

Question

并且无法弄清楚如何仅使用顺风类对像素完美设计进行编码。简单的例子，我需要 padding-left 22px，但最接近的顺风类是 pl-6 和 pl-8，分别是 24px 和 32px。因此，在一天结束时，我有一堆顺风类 + 1 个自定义，我在其中进行了安排，这违背了该框架“实用程序优先”的目的。

Answer 1

您可以尝试使用 px 和 % 样式 -

w-[100px] or w-[50%]

Answer 2

好的，我需要在tailwind.config.js那里编辑和设置自定义尺寸。例如：

height: [
  ...
  '278px': '278px',
  ...
]

所以现在这个大小可以设置为 <div clas="h-278px">...</div>

更新：

在 TailwindCSS 上完成了许多项目后，我了解到如果只使用一次，在 tailwind 配置中设置间距/w/h... 并不是最佳选择。最好使用自定义类，无论如何，您始终可以在该类中使用 @apply。

2021 年更新：

从 Tailwind 2.1 版开始，我们可以启用 JIT 并使用如下任意样式：

mb-[278px]

我会出于特定目的使用自定义样式 (3认同)
从现在开始，我们可以借助 tailwindcss-jit 库实现像素完美的设计。他们使用方括号表示法，例如 <div class="h-[278px]">...</div> (2认同)

Answer 3

Mladen Janjetovic提到，您还可以向顺风设置添加新的实用程序。将您自己的实用程序添加到 Tailwind 的最简单方法是简单地将它们添加到您的 CSS。

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .h-278 {
    height: 278px;
  }
}

所以现在这个高度可以设置为

<div clas="h-278">...</div>

通过使用该@layer指令，Tailwind 会自动将这些样式移动到同一位置，@tailwind utilities以避免意外的特殊性问题。使用该@layer指令还将指示 Tailwind 在清除实用程序层时考虑清除这些样式。