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

Question

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

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

原文由 RomkaLTU 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

更新：

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

2021 年更新：

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

 mb-[278px]

原文由 RomkaLTU 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

原文由 Indrakant 发布，翻译遵循 CC BY-SA 4.0 许可协议