css - Tailwind CSS 如何编码像素完美设计

Question

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

score 35 · Accepted Answer

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

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

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

更新：

在 TailwindCSS 之上完成了许多项目后，我了解到如果仅使用一次，在 tailwind 配置中设置间距/w/h... 并不是非常理想的。最好使用自定义类，您始终可以在该类中使用@apply。

2021 年更新：

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

mb-[278px]

score 7 · Accepted Answer

7

你可以试试这个 px 和 % 样式 -

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

于 2021-11-13T03:59:20.687 回答

score 6 · Accepted Answer

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 在清除实用程序层时考虑清除这些样式。

3 回答 3