Faizal
/icons8-next.js-96.png

Tailwind CSS Basics

Tailwind CSS is a utility-first CSS framework that allows developers to build modern and responsive user interfaces directly within their HTML or JSX.

Unlike traditional CSS frameworks that provide pre-built components, Tailwind provides low-level utility classes that can be combined to create custom designs.

Why Tailwind CSS?

Tailwind CSS has become one of the most popular CSS frameworks because it offers:

  • Faster development
  • Consistent design system
  • Responsive design utilities
  • Dark mode support
  • Easy customization
  • Small production bundle size

Installing Tailwind CSS

For a Next.js project:

npm install tailwindcss @tailwindcss/postcss

Create your CSS file:

@import "tailwindcss";

Your First Tailwind Component

<button class="bg-blue-500 text-white px-4 py-2 rounded">
  Click Me
</button>

Explanation

  • bg-blue-500 → Blue background
  • text-white → White text
  • px-4 → Horizontal padding
  • py-2 → Vertical padding
  • rounded → Rounded corners

Colors

Tailwind provides hundreds of color utilities.

<div class="bg-red-500 text-white p-4">
  Red Box
</div>

Some common colors:

bg-blue-500
bg-green-500
bg-red-500
bg-yellow-500
bg-purple-500

Typography

Font Size

<p class="text-xs">Extra Small</p>
<p class="text-sm">Small</p>
<p class="text-base">Base</p>
<p class="text-lg">Large</p>
<p class="text-xl">Extra Large</p>

Font Weight

<p class="font-light">Light</p>
<p class="font-normal">Normal</p>
<p class="font-medium">Medium</p>
<p class="font-bold">Bold</p>

Text Alignment

<p class="text-left">Left</p>
<p class="text-center">Center</p>
<p class="text-right">Right</p>

Spacing

Spacing is controlled using padding and margin.

Padding

<div class="p-4">
  Padding
</div>

p-1
p-2
p-4
p-6
p-8

Margin

<div class="m-4">
  Margin
</div>

Examples:

mt-4
mb-4
ml-4
mr-4
mx-auto

Width and Height

<div class="w-64 h-32 bg-blue-500"></div>

Common values:

w-full
w-screen
h-screen

Borders

<div class="border border-gray-300">
  Border
</div>

Rounded corners:

rounded
rounded-md
rounded-lg
rounded-xl
rounded-full

Shadows

<div class="shadow-md">
  Card
</div>

Available shadows:

shadow-sm
shadow
shadow-md
shadow-lg
shadow-xl

Flexbox

Flexbox makes layout creation easy.

<div class="flex">
  <div>One</div>
  <div>Two</div>
</div>

Justify Content

justify-start
justify-center
justify-end
justify-between
justify-around

Example:

<div class="flex justify-between">
  <div>Logo</div>
  <div>Menu</div>
</div>

Align Items

items-start
items-center
items-end

Example:

<div class="flex items-center">
  Content
</div>

Grid Layout

<div class="grid grid-cols-2 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Three Columns

<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Responsive Design

Tailwind uses breakpoint prefixes.

<div class="text-sm md:text-lg lg:text-2xl">
  Responsive Text
</div>

Breakpoints:

sm: 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px

Responsive Grid

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
  Content
</div>

Hover Effects

<button class="bg-blue-500 hover:bg-blue-700">
  Hover Me
</button>

Focus States

<input
  class="border focus:outline-none focus:ring-2 focus:ring-blue-500"
/>

Transitions

<button
  class="transition duration-300 hover:scale-105"
>
  Hover
</button>

Transform Utilities

hover:scale-105
hover:rotate-6
hover:-translate-y-1

Positioning

relative
absolute
fixed
sticky

Example:

<div class="relative">
  <div class="absolute top-0 right-0">
    Badge
  </div>
</div>

Dark Mode

Tailwind supports dark mode.

<div class="bg-white dark:bg-black">
  Content
</div>

Text example:

<p class="text-black dark:text-white">
  Hello
</p>

Common Card Component

<div class="rounded-xl shadow-md p-6 bg-white">
  <h2 class="text-xl font-bold">
    Tailwind Card
  </h2>

  <p class="text-gray-600">
    Simple card component.
  </p>
</div>

Common Button Component

<button
  class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition"
>
  Button
</button>

Common Navbar

<nav class="flex justify-between items-center p-4">
  <h1>Logo</h1>

  <div class="flex gap-4">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>
</nav>

Advantages of Tailwind CSS

  1. Utility-first workflow
  2. Faster development
  3. Responsive utilities
  4. Easy maintenance
  5. Consistent styling
  6. Great developer experience

Best Practices

  • Use reusable components.
  • Avoid excessive utility duplication.
  • Organize classes logically.
  • Use responsive utilities.
  • Use dark mode support.
  • Keep designs consistent.

Conclusion

Tailwind CSS is a powerful utility-first framework that helps developers create beautiful, responsive, and modern user interfaces quickly. By mastering utility classes such as spacing, colors, typography, flexbox, grid, and responsive design, you can build professional websites without writing large amounts of custom CSS.

Learning Tailwind CSS is one of the best investments for modern frontend development and works perfectly with React, Next.js, and other JavaScript frameworks.

Built with love by faizal sheikh