Tailwind Css Building Buttons Alerts Cards Modals Complete Guide

1. Building a Button

Example: Creating a Primary Button

HTML:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Click Me!
</button>

Explanation:

• bg-blue-500: Sets the background color to blue.
• hover:bg-blue-700: Changes the background color to a darker shade of blue when hovered over.
• text-white: Makes the button text white.
• font-bold: Sets the font weight to bold.
• py-2 px-4: Adds padding on the y-axis (top and bottom) and x-axis (left and right).
• rounded: Gives the button rounded corners.

Example: Creating a Secondary Button

HTML:

<button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center">
  <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12 4l4 3H7v6h9l-4 3L15 12H9V4z"/></svg>
  <span>Details</span>
</button>

Explanation:

• bg-gray-300: Sets the background color to gray.
• hover:bg-gray-400: Changes the background color to a darker shade of gray when hovered over.
• text-gray-800: Makes the button text dark gray.
• inline-flex items-center: Centers the child elements (icon and text) vertically within the flex container.
• <svg> and <path>: Adds an icon inside the button.

2. Building an Alert

Example: Creating a Success Alert

HTML:

<div class="bg-green-100 border-t-4 border-green-500 rounded-b text-green-900 px-4 py-3 shadow-md" role="alert">
  <div class="flex">
    <div class="py-1"><svg class="fill-current h-6 w-6 text-green-500 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg></div>
    <div>
      <p class="font-bold">Success!</p>
      <p class="text-sm">Your operation was successful.</p>
    </div>
  </div>
</div>

Explanation:

• bg-green-100: Sets the background color slightly lighter green.
• border-t-4 border-green-500: Adds a top border with thickness of 4px and color green.
• rounded-b: Rounds the bottom corners.
• text-green-900: Sets the text color to dark green.
• shadow-md: Adds a medium shadow.
• <svg> and <path>: Adds a success icon.
• font-bold: Sets the font weight of the title text to bold.
• text-sm: Sets the font size of the subtitle text to small.

3. Building a Card

Example: Creating a Simple Card with Image and Content

HTML:

<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="https://tailwindcss.com/img/card-top.jpg" alt="Sunset in the mountains">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">The Coldest Sunset</div>
    <p class="text-gray-700 text-base">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">#winter</span>
  </div>
</div>

Explanation:

• max-w-sm: Limits the card width to a small maximum.
• rounded: Rounds the corners.
• overflow-hidden: Hides any elements that overflow from the card.
• shadow-lg: Adds a large shadow.
• <img class="w-full">: Makes the image width take up the full card.
• px-6 py-4: Adds padding to top, right, bottom, and left of the text container.
• font-bold text-xl mb-2: Makes the title bold, large, and adds margin below it.
• text-gray-700 text-base: Sets the text color to mid-gray and font size to base.
• <span> tags with utility classes: Creates tag-like items with appropriate styling.

4. Building a Modal

Example: Creating a Basic Modal

Here is a basic example of how a modal might look like:

HTML:

<div id="myModal" class="hidden fixed inset-0 z-50 overflow-y-auto items-start justify-center flex">
  <div class="relative w-auto my-6 mx-auto max-w-6xl">
    <!--content-->
    <div class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
      <!--header-->
      <div class="flex items-start justify-between p-5 border-b border-solid border-gray-100 rounded-t">
        <h3 class="text-3xl font-semibold">
          Notice Modal
        </h3>
        <button class="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none" onclick="toggleModal()">
          <span class="bg-transparent text-gray-900 h-6 w-6 text-2xl block outline-none focus:outline-none">
            ×
          </span>
        </button>
      </div>
      <!--body-->
      <div class="relative p-6 flex-auto">
        <p class="my-4 text-gray-600 text-lg leading-relaxed">
          Notice Modal.
        </p>
      </div>
      <!--footer-->
      <div class="flex items-center justify-end p-6 border-t border-solid border-gray-100 rounded-b">
        <button class="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" onclick="toggleModal()">
          Close
        </button>
        <button class="bg-green-500 text-white active:bg-green-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" onclick="toggleModal()">
          Save Changes
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Trigger Modal -->
<button class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded" onclick="toggleModal()">
  Open Modal
</button>

<script>
  function toggleModal() {
    document.getElementById('myModal').classList.toggle("hidden");
  }
</script>

Explanation:

• hidden: Hides the modal by default.
• fixed inset-0 z-50 overflow-y-auto: Positions the modal fixed, centers it, adds stacking context (z-index), and allows for vertical scrolling if needed.
• w-auto my-6 mx-auto max-w-6xl: Sets flexible width, adds margins, and limits the maximum width.
• Inner structure is separated into header, body, and footer sections using appropriate padding, border, and shadow utilities.
• bg-gray-900 text-white: Sets the header text to white with a dark grey background.
• bg-green-500 text-white: Sets the footer save button to white text with a green background.
• bg-red-500 text-white: Sets the footer close button to white text with a red background.