Tailwind CSS how to code pixel perfect design

元气小坏坏 提交于 2021-02-07 19:07:40

问题


Just started to use https://tailwindcss.com

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".


回答1:


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

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

So now this size can be set with <div clas="h-278px">...</div>

Update:

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 custom class you can always use @apply in that class anyway.




回答2:


Has mention by Mladen Janjetovic, you can also add new utilities to you tailwind setup. The easiest way to add your own utilities to Tailwind is to simply add them to your CSS.

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

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

So now this height can be set with

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

By using the @layer directive, Tailwind will automatically move those styles to the same place as @tailwind utilities to avoid unintended specificity issues. Using the @layer directive will also instruct Tailwind to consider those styles for purging when purging the utilities layer.



来源:https://stackoverflow.com/questions/54618144/tailwind-css-how-to-code-pixel-perfect-design

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!