顺风CSS如何编码像素完美的设计

Question

刚开始使用 https://tailwindcss.com

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

Answer 1

好的，我知道了，我需要编辑tailwind.config.js并在那里设置自定义大小。例如：

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

所以现在可以使用<div clas="h-278px">...</div>设置此大小

更新：

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

2021 年更新：

从顺风版本 2.1 开始，我们可以启用 JIT 并使用任意样式，如下所示：

mb-[278px]

Answer 2

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

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

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