Tailwind CSS如何编码像素完美设计 [英] Tailwind CSS how to code pixel perfect design

问题描述

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

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

And can't figure out how to code pixel perfect design only with tailwind classes. Simple example, I need padding-left 22px but closest tailwind class is pl-6 and pl-8 which is 24px and 32px respectively. So at the end of the day, I have a bunch of tailwind classes + 1 custom where I make arrangements this defeats the purpose of this framework "utilities first".

推荐答案

好了，我需要编辑 tailwind.config.js 并在其中设置自定义大小.例如:

Ok got it, I need to edit tailwind.config.js and set custom sizes there. For example:

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

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

更新:

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

After completed many projects on top of TailwindCSS I learned that it's not very optimal to set spacing/w/h... in tailwind config if it's used only once. It's better to go with the custom class you can always use @apply in that class anyway.

更新2021:

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

As of tailwind version 2.1 we can enable JIT and use arbitrary styles like this:

mb-[278px]

这篇关于Tailwind CSS如何编码像素完美设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！