5 Tailwind CSS Tricks I Use in Every Next.js Project

#tailwindcss #nextjs #css #website

I've been building Next.js projects with Tailwind CSS for 4 years.

These are the 5 tricks I use in literally every single project.

1. Animated Gradient Text

<h1 className="bg-gradient-to-r from-white via-brand-400 to-white 
  bg-clip-text text-transparent bg-[length:200%_auto] 
  animate-[shine_3s_linear_infinite]">
  Cinematic Landing Page
</h1>

Add to your tailwind.config.ts:

extend: {
  keyframes: {
    shine: {
      '0%': { backgroundPosition: '200% center' },
      '100%': { backgroundPosition: '-200% center' },
    }
  },
  animation: {
    shine: 'shine 3s linear infinite',
  }
}

This creates a shimmer effect on text — looks incredibly premium with zero JavaScript.

2. Responsive Container That Actually Works

Most developers use max-w-7xl mx-auto px-4 everywhere. The problem is on very wide screens it looks stretched, and on mobile the padding is inconsistent.

// Use this instead
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

The responsive padding (px-4 sm:px-6 lg:px-8) matches what Apple and most premium sites use. It feels natural on every screen size.

3. Smooth Hover Cards

<div className="
  group
  bg-surface-800/60 
  border border-white/10
  rounded-2xl 
  p-6
  transition-all 
  duration-300
  hover:border-brand-500/40 
  hover:bg-surface-800/80
  hover:-translate-y-1
  hover:shadow-[0_20px_40px_rgba(0,0,0,0.3)]
">
  <h3 className="text-white group-hover:text-brand-300 transition-colors">
    Card Title
  </h3>
</div>

The group + group-hover: pattern lets child elements react to the parent hover. The -translate-y-1 lift combined with the shadow creates a satisfying physical feel.

4. Pulse Availability Badge

I use this on every portfolio and contact page:

<div className="inline-flex items-center gap-2 px-4 py-1.5 
  bg-brand-500/10 border border-brand-500/25 rounded-full">
  <span className="relative flex h-2 w-2">
    <span className="animate-ping absolute inline-flex h-full w-full 
      rounded-full bg-brand-400 opacity-75" />
    <span className="relative inline-flex rounded-full h-2 w-2 
      bg-brand-400" />
  </span>
  <span className="text-brand-400 text-sm font-medium">
    Available for projects
  </span>
</div>

The double-span pattern creates the pulsing dot effect — one static circle, one animated ping on top.

5. Grid Background Pattern

<div className="relative">
  {/* Grid pattern */}
  <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(to_right,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:64px_64px]" />

  {/* Fade out at edges */}
  <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black" />

  {/* Your content */}
  <div className="relative z-10">
    Content here
  </div>
</div>

This creates a subtle grid pattern background that looks premium on dark pages. The gradient fade at the bottom prevents harsh edges.

Bonus — Dark Mode Color Variables

Instead of hardcoding colors, I use CSS variables in globals.css:

:root {
  --brand: #14b575;
  --surface-800: #1e293b;
  --surface-900: #0f172a;
}

Then in tailwind.config.ts:

colors: {
  brand: {
    400: '#34d399',
    500: 'var(--brand)',
  },
  surface: {
    800: 'var(--surface-800)',
    900: 'var(--surface-900)',
  }
}