Advanced Tailwind CSS Tips and Tricks

Master Tailwind CSS with these advanced techniques and best practices for building modern user interfaces.

Custom Configuration

Extend Tailwind's configuration:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          500: '#0ea5e9',
          700: '#0369a1',
          900: '#0c4a6e',
        },
      },
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
};

Custom Components

Create reusable components:

// Button.tsx
interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  children: React.ReactNode;
}

const buttonVariants = {
  primary: 'bg-primary-500 hover:bg-primary-600 text-white',
  secondary: 'bg-gray-500 hover:bg-gray-600 text-white',
  danger: 'bg-red-500 hover:bg-red-600 text-white',
};

const buttonSizes = {
  sm: 'px-3 py-1.5 text-sm',
  md: 'px-4 py-2 text-base',
  lg: 'px-6 py-3 text-lg',
};

export function Button({ 
  variant = 'primary',
  size = 'md',
  children 
}: ButtonProps) {
  return (
    <button
      className={`
        ${buttonVariants[variant]}
        ${buttonSizes[size]}
        rounded-lg font-medium transition-colors
        focus:outline-none focus:ring-2 focus:ring-offset-2
        focus:ring-primary-500 disabled:opacity-50
      `}
    >
      {children}
    </button>
  );
}

Custom Utilities

Create custom utilities:

@layer utilities {
  .text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  }
  
  .scrollbar-hide {
    scrollbar-width: none;
    &::-webkit-scrollbar {
      display: none;
    }
  }
}

Responsive Design

Create responsive layouts:

function ResponsiveCard() {
  return (
    <div className="
      p-4 sm:p-6 lg:p-8
      grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3
      gap-4 sm:gap-6 lg:gap-8
    ">
      <div className="
        col-span-1 sm:col-span-2 lg:col-span-1
        bg-white rounded-lg shadow-lg
        transform transition-transform hover:scale-105
      ">
        {/* Card content */}
      </div>
    </div>
  );
}

Dark Mode

Implement dark mode:

function DarkModeCard() {
  return (
    <div className="
      bg-white dark:bg-gray-800
      text-gray-900 dark:text-gray-100
      border border-gray-200 dark:border-gray-700
      rounded-lg shadow-lg
    ">
      <h2 className="
        text-2xl font-bold
        text-gray-800 dark:text-gray-200
      ">
        Card Title
      </h2>
      <p className="
        mt-2 text-gray-600 dark:text-gray-400
      ">
        Card content goes here
      </p>
    </div>
  );
}

Animation

Add custom animations:

@layer components {
  .animate-slide-in {
    animation: slide-in 0.5s ease-out;
  }
  
  @keyframes slide-in {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
}

Best Practices

1. Use semantic class ordering
2. Extract common patterns
3. Use proper responsive design
4. Implement proper dark mode
5. Optimize for production
6. Use proper typography
7. Maintain consistency

Conclusion

Tailwind CSS provides powerful tools for building modern UIs. Focus on creating reusable patterns and maintaining consistency across your application.