DEV Community

Tihomir Ivanov
Tihomir Ivanov

Posted on

Tailwind CSS – 5-Minute Quick Review for React Developers

A concise refresher on Tailwind CSS utilities, layout, components, and setup—perfect for React developers or interview prep.

What is Tailwind CSS?

Tailwind is a utility-first CSS framework that lets you build modern UIs directly in your markup.

<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
  Click Me
</button>
Enter fullscreen mode Exit fullscreen mode

Installation (with React) 

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

Edit tailwind.config.js 

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

Add to index.css 

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Layout

  • flex, grid, block, inline-block
  • Alignment: items-center, justify-between
  • Spacing: m-4, p-2, gap-4, space-x-2
  • Sizing: w-1/2, h-full, max-w-md 
<div class="flex items-center justify-between p-4">
  <span>Left</span>
  <span>Right</span>
</div>
Enter fullscreen mode Exit fullscreen mode

Styling

Colors 

bg-blue-500, text-gray-800, border-red-300
Enter fullscreen mode Exit fullscreen mode

Borders & Radius 

border, border-2, rounded, rounded-lg
Enter fullscreen mode Exit fullscreen mode

Shadows 

shadow, shadow-md, shadow-xl
Enter fullscreen mode Exit fullscreen mode

Typography 

text-sm, text-lg, font-bold, uppercase, tracking-wide
Enter fullscreen mode Exit fullscreen mode

Components Examples

Button 

<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded">
  Submit
</button>
Enter fullscreen mode Exit fullscreen mode

Card 

<div class="max-w-sm bg-white shadow-md rounded p-4">
  <h2 class="text-xl font-bold mb-2">Card Title</h2>
  <p class="text-gray-600">Card description...</p>
</div>
Enter fullscreen mode Exit fullscreen mode

Responsive Design

Tailwind uses mobile-first breakpoints:

<div class="text-sm md:text-base lg:text-lg">Text</div>
Enter fullscreen mode Exit fullscreen mode

Breakpoints:

  • sm – 640px
  • md – 768px
  • lg – 1024px
  • xl – 1280px
  • 2xl – 1536px

Dark Mode

Enable in config:

darkMode: 'class',
Enter fullscreen mode Exit fullscreen mode

Usage:

<div class="bg-white dark:bg-gray-800 text-black dark:text-white">
  Content
</div>
Enter fullscreen mode Exit fullscreen mode

Using Tailwind with React

Tailwind works out of the box with JSX:

export default function Hero() {
  return (
    <section className="bg-gray-100 text-center py-10">
      <h1 className="text-3xl font-bold">Welcome</h1>
      <p className="text-gray-600">Start building with Tailwind.</p>
    </section>
  );
}
Enter fullscreen mode Exit fullscreen mode

Useful Plugins

  • @tailwindcss/forms – Better form styling
  • @tailwindcss/typography – Rich prose formatting
  • @tailwindcss/aspect-ratio – Media scaling

Add via:

npm install @tailwindcss/forms
Enter fullscreen mode Exit fullscreen mode

And in config:

plugins: [require('@tailwindcss/forms')],
Enter fullscreen mode Exit fullscreen mode

Summary

  • Utility-first CSS for rapid UI development
  • Mobile-first, responsive, accessible out of the box
  • Works great with React
  • Highly customizable via config
  • Use plugins for additional functionality

Top comments (0)