CODEWITHSUNDEEP
csstailwind-css
RomkaLTU
RomkaLTU

Reputation: 4128

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

Upvotes: 49

Views: 78361

Answers (3)

Indrakant
Indrakant

Reputation: 411

You can try this for px and % styling -

w-[100px] or w-[50%]

Upvotes: 32

RomkaLTU
RomkaLTU

Reputation: 4128

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

Update 2021:

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

mb-[278px]

Upvotes: 69

Bassirou Diaby
Bassirou Diaby

Reputation: 449

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.

Upvotes: 7

Related Questions