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

刚开始使用

---

而且无法理解如何仅使用tailwind类编写像素完美设计代码。举个简单的例子，我需要填充左22px，但最近的顺风类是pl-6和pl-8，分别是24px和32px。因此，在一天结束时，我有一堆tailwind类+1自定义，我在其中进行安排，这违背了这个框架“实用程序优先”的目的

好了，我需要编辑

tailwind.config.js

并在那里设置自定义尺寸。例如：

高度：[
...
“278px”：“278px”，
...
]

因此，现在可以使用

…

更新：

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

更新2021:

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

mb-[278px]

如所述，您还可以向顺风设置中添加新内容。 将自己的实用程序添加到Tailwind中最简单的方法就是将它们添加到CSS中

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .h-278 {
    height: 278px;
  }
}

所以现在这个高度可以用

<div clas="h-278">...</div>

。。。

通过使用

@layer

指令，Tailwind将自动将这些样式移动到与

@Tailwind utilities

相同的位置，以避免意外的特殊性问题。

---

使用<代码> @层> /代码>指令也将指示尾风在清洗公用事业层时考虑这些清洗样式。

除非框架是专门考虑框架的能力/期望而设计的，否则您将永远无法从框架中获得像素完美的设计。我不同意您的意见，或者我可能会说。“在没有任何定制功能的框架中，您永远无法获得像素完美的设计“：）至于这个框架，我认为可以在tailwind.config.js中完成，这样你就可以指定你想要的大小。当然你可以随时破解这个框架，但前提是你的设计师总是使用相等的列宽、标准化的字体大小、填充等，等等。事实上，像素完美是非常昂贵的，框架一致性很可能与设计师的“直觉”位置不符。很高兴你在这里找到了解决方法！实际上，你不应该想要一个“像素完美”的设计，这是一个15年前就应该停止使用的设计。您无法控制查看产品的用户的浏览器、屏幕和视口大小、分辨率、浏览器缩放、操作系统缩放、自定义字体大小等。当我们的目标应该是在任何情况下都看起来很好的动态网站，而不是像Photoshop一样的静态网站时，尝试使其“像素完美”是没有任何意义的。我会为特定目的使用自定义样式。有没有办法动态定义像素

class=“h-23px”

动态创建23px或任何其他像素当前没有，但这需要某种反向编译，从HTML/JS/PHP到CSS。类似于PurgeCSS的工作。从现在开始，我们可以在tailwindcss jit库的帮助下实现像素完美的设计。他们使用方括号表示法，比如……我不明白，如果我们有tailwind.config.js，为什么要使用这个？@RomkaLTU主要原因是它是tailwind的创建者添加自定义实用程序的方法。第二个同样有趣的原因是，使用此方法，您可以切换让您执行的操作，例如

…

，但h不是自定义实用程序，自定义实用程序是“真正的自定义实用程序”。h、 w、p和其他从spacing属性生成的属性。这不太有效，我只想像这样放置一个红色边框：

@layer utilities{.red{border:1px solid red；}}