Tailwind CSS Complete Documentation

This content originally appeared on DEV Community and was authored by Munisekhar Udavalapati

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

This content originally appeared on DEV Community and was authored by Munisekhar Udavalapati

Print Share Comment Cite Upload Translate Updates

APA

Munisekhar Udavalapati | Sciencx (2025-03-31T06:30:27+00:00) Tailwind CSS Complete Documentation. Retrieved from https://www.scien.cx/2025/03/31/tailwind-css-complete-documentation/

MLA

" » Tailwind CSS Complete Documentation." Munisekhar Udavalapati | Sciencx - Monday March 31, 2025, https://www.scien.cx/2025/03/31/tailwind-css-complete-documentation/

HARVARD

Munisekhar Udavalapati | Sciencx Monday March 31, 2025 » Tailwind CSS Complete Documentation., viewed ,<https://www.scien.cx/2025/03/31/tailwind-css-complete-documentation/>

VANCOUVER

Munisekhar Udavalapati | Sciencx - » Tailwind CSS Complete Documentation. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/03/31/tailwind-css-complete-documentation/

CHICAGO

" » Tailwind CSS Complete Documentation." Munisekhar Udavalapati | Sciencx - Accessed . https://www.scien.cx/2025/03/31/tailwind-css-complete-documentation/

IEEE

" » Tailwind CSS Complete Documentation." Munisekhar Udavalapati | Sciencx [Online]. Available: https://www.scien.cx/2025/03/31/tailwind-css-complete-documentation/. [Accessed: ]

rf:citation

» Tailwind CSS Complete Documentation | Munisekhar Udavalapati | Sciencx | https://www.scien.cx/2025/03/31/tailwind-css-complete-documentation/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.