DEV Community: Aishwarya S

15 Tailwind CSS Tricks That Will Make You a Faster Developer

Aishwarya S — Wed, 11 Mar 2026 12:21:13 +0000

Introduction

Tailwind CSS has completely changed how many developers build UI. Instead of writing custom CSS for everything, you can compose designs directly in your markup using utility classes.

But most developers only use a small portion of what Tailwind actually offers.

In this article, I’ll share 15 practical Tailwind CSS tricks that can make your workflow faster and your code cleaner.

Let’s dive in.

1. Perfect Centering with Flexbox

Instead of writing custom CSS for centering elements, Tailwind makes it simple.

<div class="flex items-center justify-center h-screen">
  Centered Content
</div>

This works great for:

hero sections
login pages
empty states

2. Use `space-x` and `space-y` for Cleaner Layouts

Instead of adding margins to each element, use spacing utilities.

<div class="flex space-x-4">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
</div>

Your markup stays much cleaner.

3. Quickly Create Responsive Layouts

Tailwind’s responsive utilities make layouts easy.

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- cards -->
</div>

This automatically adapts across screen sizes.

4. Build Better Cards with Shadow Utilities

<div class="p-6 bg-white rounded-xl shadow-md">
  <h2 class="text-xl font-semibold">Card Title</h2>
  <p class="text-gray-500">Simple and clean UI.</p>
</div>

No custom CSS required.

5. Clamp Text Width for Better Readability

Long lines reduce readability.

<div class="max-w-prose">
  <p>Your text content...</p>
</div>

This is perfect for blog layouts.

6. Use aspect-ratio for Media

Keep images and videos consistent.

<div class="aspect-video bg-gray-200"></div>

Useful for:

thumbnails
videos
cards

7. Hover Effects Without Custom CSS

<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
  Hover Me
</button>

Tailwind hover utilities are powerful.

8. Create Beautiful Gradients

<div class="bg-gradient-to-r from-purple-500 to-pink-500 h-40 rounded-lg"></div>

Perfect for hero sections.

9. Quickly Build Responsive Navigation

<nav class="flex items-center justify-between p-4">
  <h1 class="font-bold text-lg">Logo</h1>
  <div class="space-x-4 hidden md:block">
    <a href="#">Home</a>
    <a href="#">About</a>
  </div>
</nav>

10. Easily Control Overflow

<div class="overflow-x-auto">
  <!-- table or content -->
</div>

Great for mobile tables.

11. Truncate Long Text

<p class="truncate w-48">
  This is very long text that will truncate automatically
</p>

12. Dark Mode Support

Tailwind makes dark mode easy.

<div class="bg-white dark:bg-gray-900 text-black dark:text-white">
  Dark mode ready UI
</div>

13. Use `@apply` to Reduce Repeated Classes

Example:

.btn {
  @apply px-4 py-2 rounded bg-blue-600 text-white;
}

Great for reusable components.

14. Use Container for Layout Consistency

<div class="container mx-auto px-4">
  Content
</div>

Keeps layouts aligned.

15. Combine Utilities for Powerful UI

The real strength of Tailwind is combining small utilities.

Example:

<button class="px-6 py-3 bg-indigo-600 text-white rounded-lg shadow hover:bg-indigo-700 transition">
  Get Started
</button>

You can build complete UI components without writing custom CSS.

Bonus Resource for Tailwind Developers

If you found these tips helpful, I put together a collection of 50 practical Tailwind CSS tricks with examples and UI patterns that can help you build interfaces even faster.

You can check it out here:

50 Essential Tailwind CSS Tricks

https://uicrafted.gumroad.com/l/tailwind-tricks

Final Thoughts

Tailwind CSS can significantly improve your development speed once you start using its utilities effectively.

Small tricks like these can save hours of development time across projects.

If you have your own favorite Tailwind tricks, feel free to share them in the comments.

Why I built my own portfolio template

Aishwarya S — Wed, 14 Jan 2026 05:52:06 +0000

I’ve reviewed a lot of developer portfolios recently — including my own old one — and I noticed the same issues again and again:

cluttered UI
too many colors and gradients
animations that distract instead of guide
project cards with zero context
slow Lighthouse scores
painful mobile experience

Most portfolios end up being:

“Here are some GitHub links and a big hero headline”

But a portfolio is supposed to:
communicate your role
show real outcomes, not just tech stack
tell a short story
make it super clear how to contact you

So I decided to design and build a clean, modern portfolio template focused on UX first, then visuals — using:

Next.js (App Router)
React 19
Tailwind CSS v4
TypeScript
Framer Motion

The design goals

When I started the design, I wrote down 6 rules:

readable first, pretty second
fewer colors, more whitespace
minimal but meaningful motion
projects tell stories, not just tech stacks
must be blazing fast on mobile
content structure should be easy to customize

That’s what guided everything else.

UX decisions I made (and why)

🧭 Navigation

I avoided complex nav layouts.
sticky, simple top navbar
clear sections: Home, About, Projects, Contact
visible call-to-action for “Contact” The goal was don’t make the user think.

🧑‍💻 Hero section

Instead of buzzwords like:

“Full-stack ninja rockstar developer”

I optimized for:

who you are
what you do
what problem you solve

Plus a visible CTA such as View Projects or Download Resume.

💼 Projects section

This is where most portfolios fail.

Instead of only:

title
tech used

I structured project cards around:

problem
solution
impact / result
screenshot preview

This makes it usable for recruiters and clients, not just developers.

📝 About section

No huge autobiographies.

Just:

current role
brief background
tools you use
what you enjoy building

Short and scannable.

📱 Mobile experience matters

The template is fully responsive, meaning it works great on mobile, tablet, and desktop sizes. While it is not strictly “mobile-first” in terms of development approach, I still paid close attention to how it feels on smaller screens.

Focus points:

important buttons are easy to tap
text remains readable without zooming
images are optimized to reduce load time
layout stays clean instead of cramped
animations perform smoothly on mobile devices

The goal was simply:

the portfolio should feel just as good on a phone as it does on a laptop.

Tech stack & architecture

I chose:

Next.js App Router
React 19
Tailwind CSS v4
TypeScript
Framer Motion

Reasons:

Performance
Built-in routing
SEO-friendly
Developer experience
Easy theming

The template is fully componentized and sections are driven by structured data so customization is easy.

All content is editable from:
src/utils/data.ts

So you don’t need to dig through components just to change text.

Live demo

You can view the live demo here:
👉 https://uiux-portfolio-template-nextjs.vercel.app

(works best on mobile too)

Preview

Want the full template?

I made the full version available with:

projects section layout
blog section
testimonials
animations
polished UI
commercial license

Get the full PRO template here →
https://uicrafted.gumroad.com/l/wqsyam

Final thoughts

Even if you don’t use my template, I hope this gives you ideas to:

simplify your design
focus on UX over decoration
tell the story behind your work
optimize mobile experience
rethink how you present projects

Your portfolio is not just a gallery.
It’s a communication tool.