Top Tips and Tricks with Tailwind CSS

[brunosduarte]

Recently, while learning Next.js (Reactjs) & developing a dashboard using shadcn/ui, I thought of experimenting with Tailwind CSS. After using a couple of ready-made UI components built with Tailwind CSS & learning about different classes like Grid, Flex, Border etc, I was pleasantly surprised to see significantly faster development & improved workflow. One must definitely try using it!

Find below the examples implementing the Tailwind tips & tricks.

1. Delegate classes

Instead of using text-* on each li, we can simply use the same class on the ul.

<ul className="text-2xl text-teal-900">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

2. Space between elements

Instead of using gap, margin, padding property on each child for space, we can use the space-x-, space-y- property on just the parent.

<ul className="flex flex-row space-x-5">
  <li className="size-16 bg-red-400">Item 1</li>
  <li className="size-16 bg-red-500">Item 2</li>
  <li className="size-16 bg-red-600">Item 3</li>
</ul>

Where Find Me

[brunosduarte]

Great post!

This seems to be a very good post!

if (post === 'good') {
  return true
}