Tailwind CSS how to code pixel perfect design

问题

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

标签

css

tailwind-css