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

Question

并且无法弄清楚如何仅使用 tailwind classes 来编写像素完美设计代码。简单的例子，我需要 padding-left 22px 但最近的 tailwind class 是 pl-6 和 pl-8，分别是 24px 和 32px。所以在一天结束时，我有一堆顺风 classes + 1 个习惯，我在其中进行安排，这违背了这个框架的目的 "utilities first"。

Answer 1

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

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

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

设置

更新：

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

2021 年更新：

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

mb-[278px]

Answer 2

, you can also add new 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 3

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

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

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

Tailwind CSS how to code pixel perfect design

css

tailwind-css