Ultimate Tailwind CSS Handbook
Published: 2023-07-28 07:50:32

🌟 Unleash web magic with Tailwind CSS, a lightning-fast CSS framework! 💪 Dazzling examples for colors, grids, and typography will charm all devices. 🎨 Wave your coding wand and create stunning layouts effortlessly! 🪄🚀 Let's embark on this magical journey! 🧙‍♀️🌈 Happy Tailwinding! 🎉

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/isy8hs2l1cou0l9gry9p.png)

## **Basic Usage**

To get started with Tailwind CSS, include this script in your HTML file's **`<head>`** section:

```html
<script src="https://cdn.tailwindcss.com"></script>
```

- Other installation guide’s [here](https://tailwindcss.com/docs/installation)
- Use [Tailwind play](https://play.tailwindcss.com/) to play around with the styles.

## **Typography**

1. **Text color:** **`<p class="text-red-500">Red text</p>`**

- **Text size:** **`<p class="text-lg">Large text</p>`**
- **Text weight:** **`<p class="font-bold">Bold text</p>`**
- **Text alignment:** **`<p class="text-center">Centered text</p>`**

```html
<div class="text-center">
  <p class="text-red-500 text-xl">Red text</p>
  <p class="text-lg">Large text</p>
  <p class="font-bold">Bold text</p>
  <p class="text-center">Centered text</p>
</div>
```

## **Colors**

- **Background color:** **`<div class="bg-blue-200">Blue background</div>`**
- **Text color:** **`<p class="text-green-600">Green text</p>`**
- **Border color:** **`<div class="border border-purple-500">Purple border</div>`**
- **Hover color:** **`<a class="hover:text-indigo-700" href="#">Hover me</a>`**

```html
<div class="bg-blue-200 text-center py-4">
  <p class="text-green-600">Green text</p>
  <div class="border border-purple-500 my-2 p-2">Purple border</div>
  <a class="hover:text-indigo-700" href="#">Hover me</a>
</div>
```

## **Layout**

- **Width:** **`<div class="w-64">Width of 64 pixels</div>`**
- **Height:** **`<div class="h-16">Height of 16 pixels</div>`**
- **Max width:** **`<div class="max-w-md">Maximum width of 28rem</div>`**
- **Max height:** **`<div class="max-h-64">Maximum height of 16rem</div>`**

```html
<div
  class="w-64 h-16 bg-gray-300 mx-auto mt-4 flex justify-center items-center"
>
  Width of 64 pixels, Height of 16 pixels
</div>
```

## **Flexbox**

- **Flex container:** **`<div class="flex">`**
- **Flex item with equal width:** **`<div class="flex-1">Item 1</div>`**
- **Flex item with double width:** **`<div class="flex-2">Item 2</div>`**

```html
<div class="flex mt-4">
  <div class="flex-1 bg-blue-400 p-4">Flex item 1</div>
  <div class="flex-2 bg-green-400 p-4">Flex item 2</div>
</div>
```

## **Grid**

- **Grid container:** **`<div class="grid grid-cols-2 gap-4">`**
- **Grid item:** **`<div>Item 1</div>`**
- **Grid item:** **`<div>Item 2</div>`**

```html
<div class="grid grid-cols-2 gap-4 mt-4">
  <div class="bg-yellow-400 p-4">Grid item 1</div>
  <div class="bg-pink-400 p-4">Grid item 2</div>
</div>
```

## **Spacing**

- **Padding:** **`<div class="p-4">Padding of 1rem</div>`**
- **Margin:** **`<div class="m-4">Margin of 1rem</div>`**

```html
<div class="p-4 bg-red-400 mt-4">Padding of 1rem</div>
<div class="m-4 bg-blue-400">Margin of 1rem</div>
```

## **Sizing**

- **Width and height:** **`<div class="w-16 h-16">Width and height of 16 pixels</div>`**
- **Minimum width and height:** **`<div class="min-w-screen min-h-screen">Minimum width and height of screen size</div>`**
- **Maximum width and height:** **`<div class="max-w-xs max-h-96">Maximum width of 20rem and maximum height of 24rem</div>`**

```html
<div class="w-16 h-16 bg-purple-400 mt-4 flex justify-center items-center">
  Width and height of 16 pixels
</div>
<div
  class="min-w-screen min-h-screen bg-indigo-400 mt-4 flex justify-center items-center"
>
  Minimum width and height of screen size
</div>
<div
  class="max-w-xs max-h-96 bg-orange-400 mt-4 flex justify-center items-center"
>
  Maximum width of 20rem and maximum height of 24rem
</div>
```

## **Borders**

- **Border:** **`<div class="border border-gray-400">Gray border</div>`**
- **Rounded corners:** **`<div class="rounded-lg">Rounded corners</div>`**

```html
<div class="border border-gray-400 p-4 mt-4">Gray border</div>
<div class="rounded-lg bg-green-200 p-4 mt-4">Rounded corners</div>
```

## **Effects**

- **Box shadow:** **`<div class="shadow-lg">Box shadow</div>`**
- **Opacity:** **`<div class="opacity-75">75% opacity</div>`**

```html
<div class="shadow-lg bg-blue-200 p-4 mt-4">Box shadow</div>
<div class="opacity-75 bg-pink-200 p-4 mt-4">75% opacity</div>
```

## **Tables**

- **Table container:** **`<div class="overflow-x-auto">`**
- **Table header:** **`<th class="px-4 py-2">Header 1</th>`**
- **Table header:** **`<th class="px-4 py-2">Header 2</th>`**
- **Table row and cell:** **`<tr><td class="px-4 py-2">Row 1, Cell 1</td><td class="px-4 py-2">Row 1, Cell 2</td></tr>`**
- **Table row and cell:** **`<tr><td class="px-4 py-2">Row 2, Cell 1</td><td class="px-4 py-2">Row 2, Cell 2</td></tr>`**

```html
<div class="overflow-x-auto mt-4">
  <table class="table-auto w-full">
    <thead>
      <tr>
        <th class="px-4 py-2 bg-yellow-300">Header 1</th>
        <th class="px-4 py-2 bg-yellow-300">Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="px-4 py-2 bg-purple-300">Row 1, Cell 1</td>
        <td class="px-4 py-2 bg-purple-300">Row 1, Cell 2</td>
      </tr>
      <tr>
        <td class="px-4 py-2 bg-pink-300">Row 2, Cell 1</td>
        <td class="px-4 py-2 bg-pink-300">Row 2, Cell 2</td>
      </tr>
    </tbody>
  </table>
</div>
```

## **Forms**

- **Form container:** **`<form class="w-64">`**
- **Form input:** **`<input class="w-full p-2" type="text" placeholder="Username">`**
- **Form select:** **`<select class="w-full p-2"><option>Option 1</option><option>Option 2</option></select>`**
- **Form button:** **`<button class="w-full py-2 mt-2 bg-blue-500 text-white">Submit</button>`**

```html
<form class="w-64 mx-auto mt-4">
  <input
    class="w-full p-2 mb-2 bg-gray-200"
    type="text"
    placeholder="Username"
  />
  <select class="w-full p-2 mb-2 bg-gray-200">
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
  <button class="w-full py-2 bg-indigo-500 text-white">Submit</button>
</form>
```

## **Responsive Classes**

- **Screen Size Prefixes:** Use **`sm`**, **`md`**, **`lg`**, **`xl`**, or **`2xl`** prefix to apply styles for different screen sizes. Example: **`sm:text-lg`** (applies larger text size on small screens).
- **Responsive Flexbox:** Apply **`flex`** and **`flex-col`** classes to create responsive flexbox layouts.
- **Responsive Grid:** Use **`grid-cols-1`**, **`grid-cols-2`**, **`grid-cols-3`**, etc., to control grid columns at different screen sizes.
- **Responsive Visibility:** Hide elements on specific screen sizes using **`hidden`** or **`block`**.

```html
<div class="bg-gray-200 p-4">
  <div
    class="bg-white rounded-lg p-4 shadow-md sm:flex sm:items-center sm:justify-between"
  >
    <h2 class="text-xl font-bold mb-4 sm:mb-0">Card Title</h2>
    <div class="flex flex-col sm:flex-row sm:items-center">
      <p class="text-gray-600 sm:mr-4">Card content goes here.</p>
      <div class="flex mt-4 sm:mt-0">
        <button class="bg-blue-500 text-white py-2 px-4 rounded-md">
          Button 1
        </button>
        <button
          class="bg-green-500 text-white py-2 px-4 rounded-md ml-2 sm:ml-4"
        >
          Button 2
        </button>
      </div>
    </div>
  </div>
</div>
```