Tailwind CSS Complete Documentation

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

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

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