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

【问题标题】：Tailwind CSS 如何编码像素完美设计
【发布时间】：2019-07-04 05:09:02
【问题描述】：

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

【问题讨论】：

您永远不会从框架中获得像素完美的设计，除非该设计是专门针对该框架的能力/期望而创建的。
我不同意你的观点，或者我会说“你永远不会从没有任何自定义功能的框架中获得像素完美的设计”:) 至于这个框架，我认为这可以在 tailwind.config.js 中完成，这样你就可以指定你想要的任何大小。
当然你总是可以破解框架，但这是假设你的设计师总是使用相等的列宽、标准化的字体大小、填充等等等等。现实是像素完美是超级昂贵的和框架一致性很可能与设计师的“直觉”位置不一致。
很高兴您在这里找到了解决方法！
您实际上不应该想要一个“像素完美”的设计，即 15 年前就应该停止使用的 completely antiquated paradigm。您无法控制查看您产品的用户的浏览器、屏幕和视口大小、分辨率、浏览器缩放、操作系统缩放、自定义字体大小等。当我们应该瞄准在任何条件下看起来都不错的动态网站，而不是总是看起来像 Photoshop 的静态网站时，尝试使其“像素完美”不再有任何意义。

【解决方案1】：

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

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

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

更新：

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

2021 年更新：

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

mb-[278px]

【讨论】：

【解决方案2】：

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

【讨论】：

没看懂，有tailwind.config.js为什么还要用这个？
@RomkaLTU 的主要理由是它是 recommended way 由 tailwind 的创建者添加自定义实用程序。第二个同样有趣的原因是使用这种方法，您可以 generate responsive variants 女巫让您例如 <div clas="m:h-278">...</div>
但是 h 不是自定义实用程序，自定义实用程序是“真正的自定义实用程序”。 h、w、p 等由间距属性生成。
这不太行，我只是想像这样放置一个红色边框：@layer utilities { .red { border: 1px solid red; } }

【解决方案3】：

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

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

【讨论】：