问题描述
刚刚开始使用 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如何编码像素完美设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！