Tailwind CSS how to code pixel perfect design

css tailwind-css
RomkaLTU picture RomkaLTU · Feb 10, 2019 · Viewed 8.3k times · Source

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

Answer

RomkaLTU picture RomkaLTU · Feb 10, 2019

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]

Related questions

How to fill the height of the viewport with tailwind css

I'm just trying out Tailwind CSS and want to know how to fill the height of the viewport. Taking this example HTML from the docs <div class="flex items-stretch bg-grey-lighter"> <div class="flex-1 text-grey-darker text-center bg-grey-light px-4 …

Read More
How to create scrollable element in Tailwind without a scrollbar

I'm trying to recreate a horizontal scroll navbar with tailwind without a scrollbar on the bottom like this example (reduce the width of your screen to be able to scroll) https://getbootstrap.com/docs/5.0/examples/blog/ I tried the following …

Read More
TailwindCss Fixed NavBar

I'm trying to create a Fixed Navigation Bar in Tailwind CSS and sticky scroll main page, but no matter what I try, I can't make it work... Here is what I achieved: Here is my Code: <!-- NavBar --&…

Read More