Elevate Your Tailwind CSS Projects

For a long time, I hesitated to adopt Tailwind CSS...

1. Delegate Classes

Simplify your code by delegating classes to parent elements...

<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

Use the space-x-* and space-y-* utilities on parent elements to manage spacing between child elements without adding margin or padding to each child.

<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. Use @apply Sparingly

Avoid overusing the @apply directive in your CSS. While it can be helpful, excessive use can lead to class name collisions and maintenance challenges.

.nav-items {
    @apply flex flex-row space-x-3;
}

<ul className="nav-items">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

4. Adding Opacity

Tailwind makes it easy to add opacity to backgrounds and text with bg-opacity-* and text-opacity-* utilities.

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

5. Transitions and Animations

Incorporate smooth transitions and animations effortlessly with Tailwind’s transition-* and duration-* classes. Use pre-made animation classes like animate-spin, animate-ping, and animate-bounce for added flair.

<button className="transition-colors duration-200 p-2 text-white rounded bg-blue-500 hover:bg-blue-700 active:bg-blue-900">
    Buy Items
</button>

6. Group Hover

Achieve complex hover effects by using the group class on parent elements and group-hover on child elements.

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

7. Pseudo Classes

Use Tailwind’s predefined classes for before and after pseudo-elements directly in your JSX/HTML. Remember to add position: relative for proper functionality.

<button className="p-2 relative after:absolute after:bg-green-300 after:inset-0 after:z-0">
    <h6 className="z-10 relative">BUTTON</h6>
</button>

8. Custom Input Values

When predefined class names don’t suffice, use custom values with the property-[value] syntax.

<h5 className="text-[#007bff] text-[4rem]">
    Hello World
</h5>

Resources

Enhance your projects with ready-made Tailwind CSS components from:

• Flowbite
• daisyUI
• TailwindCSS Component (Includes a cheatsheet)

Bonus Tip: Tailwind IntelliSense Plugin

For a more efficient development experience, use the Tailwind IntelliSense plugin, which offers auto-completion and intelligent suggestions for Tailwind classes.

Tailwind CSS can revolutionize your web development process, making it faster and more enjoyable.