DEV Community

Munisekhar Udavalapati
Munisekhar Udavalapati

Posted on

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
Enter fullscreen mode Exit fullscreen mode

Include it in your CSS:

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

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>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)