Web Dev Everyday - 30th August 2024🖥️

Welcome to Web Dev Everyday – your daily dose of 3 minute web development emails.

Let's dive in!

🎯 Tip of the day (4 tailwind tips!)

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-* and 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>

3. Adding opacity to background and text

We can apply opacity to background and text separately using bg-opacity-* and text-opacity*

<div className="bg-teal-700 bg-opacity-50 w-[200px]">
  <p className="text-blue-700 text-opacity-70">tailwind css text</p>
</div>

4. Group hover

The hover on button will rotate the icon present inside the button. We can achieve it by adding group classname on button element and group-hover:whatver-we-want-to-do classname on the child.

<button className="group">
  <span>Click!</span>
  <span className="ml-2 inline-block group-hover:rotate-90">
  </span>
</button>