Menu
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".
752
It Takes Time to LearnBecause of the built-in classes, Tailwind CSS is quite learning-intensive. Even for experienced developers, it can be a challenge to learn how to use and fully utilize the pre-built classes. But, of course, as with any other development task, practice makes perfect.
The default Tailwind configuration comes with 36.4KB minified and g-zipped. Compared to Bootstrap at 22.1KB , Tailwind is 14.3KB heavier.
Every utility class in Tailwind can be applied conditionally at different breakpoints, which makes it a piece of cake to build complex responsive interfaces without ever leaving your HTML.
Use h-{number} or h-px to set an element to a fixed height.
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] If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With