Tailwind CSS如何实现像素完美设计

Question

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

并且无法弄清楚如何仅使用顺风飞行类来编码像素完美设计。简单的例子，我需要向左填充22px，但最近的顺风类是pl-6和pl-8，分别是24px和32px。因此，总之，我有一堆顺风车类+ 1个自定义项，在那里我进行安排，这违背了该框架“实用程序优先”的目的。

Answer 1

已被Mladen Janjetovic提及，您还可以向顺时针设置中添加新的utilities。 将自己的实用程序添加到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在清除实用程序层时考虑使用那些样式进行清除。

Answer 2

确定，我需要编辑tailwind.config.js并在其中设置自定义大小。例如：

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

所以现在可以使用<div clas="h-278px">...</div>

设置此大小