20

TailwindCSS

A visual guide on using TailWindCSS

GitHub

Simple Guide for Using Tailwind CSS in HTML

This is a simple guide for using Tailwind CSS in HTML.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <title>My Tailwind CSS Example</title>
</head>
<body>
  <div class="container mx-auto p-4">
    <h1 class="text-4xl font-bold text-center">Welcome to My Tailwind CSS Example</h1>
    <p class="text-lg mt-4">This is a simple guide for using Tailwind CSS in HTML.</p>
    <div class="flex justify-center mt-8">
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Click Me</button>
    </div>
  </div>
</body>
</html>

In this example, we have an HTML file that includes a basic structure with a title, stylesheet link, and a simple layout using Tailwind CSS classes.

We include the Tailwind CSS stylesheet by adding the <link> tag in the <head> section of the HTML file.

You can use the CDN link provided or install Tailwind CSS locally and reference the file accordingly.

Inside the <body> tag, we have a container (<div class="container mx-auto p-4">) that centers the content horizontally, adds some padding, and sets the maximum width.

We use Tailwind CSS utility classes to style the elements:

The <h1> heading has classes text-4xl, font-bold, and text-center to set the font size, font weight, and alignment, respectively. The <p> paragraph has the text-lg class to set the font size and mt-4 to add top margin. The <button> element has classes bg-blue-500, hover:bg-blue-700, text-white, font-bold, py-2, px-4, and rounded to style the button with a blue background color, white text, bold font weight, padding, and rounded corners. The hover:bg-blue-700 class changes the background color when hovering over the button.

Feel free to customize and expand upon this HTML example to suit your specific needs. You can use Tailwind CSS utility classes to style various elements, create layouts, and apply responsive design easily.