Introduction to Tailwind CSS

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs quickly without writing custom CSS.

Installation

To use Tailwind CSS, install it via npm:

npm install -D tailwindcss
npx tailwindcss init

Include it in your CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

Utility Classes in Tailwind CSS

1. Layout Utilities

CSS Property Tailwind Class
display: flex; flex
display: grid; grid
justify-content: center; justify-center
align-items: center; items-center
width: 100%; w-full
max-width: 1200px; max-w-7xl
height: 100vh; h-screen

2. Spacing Utilities

CSS Property Tailwind Class
margin: 1rem; m-4
margin-left: auto; margin-right: auto; mx-auto
padding: 0.5rem; p-2
padding-left: 1rem; padding-right: 1rem; px-4

3. Typography Utilities

CSS Property Tailwind Class
font-size: 1.5rem; text-2xl
font-weight: bold; font-bold
text-align: center; text-center
line-height: 1.75; leading-relaxed
letter-spacing: 0.1em; tracking-wide

4. Color Utilities

CSS Property Tailwind Class
background-color: blue; bg-blue-500
color: gray; text-gray-800
border-color: gray; border-gray-300

5. Border Utilities

CSS Property Tailwind Class
border-width: 2px; border-2
border-radius: 8px; rounded-lg

Table Styling in Tailwind CSS

Tailwind provides utilities to style tables efficiently.

Basic Table Structure 

class="table-auto border-collapse border border-gray-300 w-full">
  
     class="bg-gray-200">
       class="border border-gray-300 px-4 py-2">Name
       class="border border-gray-300 px-4 py-2">Age
       class="border border-gray-300 px-4 py-2">City
    
  
  
    
       class="border border-gray-300 px-4 py-2">John Doe
       class="border border-gray-300 px-4 py-2">25
       class="border border-gray-300 px-4 py-2">New York
    
     class="bg-gray-100">
       class="border border-gray-300 px-4 py-2">Jane Smith
       class="border border-gray-300 px-4 py-2">30
       class="border border-gray-300 px-4 py-2">Los Angeles

Table Styling Classes

CSS Property Tailwind Class
width: auto; table-auto
width: 100%; w-full
border: 1px solid; border
border-collapse: collapse; border-collapse
border-spacing: 2px; border-separate
padding: 16px; p-4
background-color: #f7fafc; `bg-gray