Ultimate Tailwind CSS Handbook

🌟 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 info

Basic Usage

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

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

Other installation guide’s here
Use Tailwind play to play around with the styles.

Typography

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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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.

<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>