Tailwind CSS Tutorial

Introduction

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build designs directly in your HTML. It's designed to be highly customizable and allows developers to create responsive layouts quickly without writing custom CSS.

Unlike Bootstrap, Tailwind CSS focuses on providing utility classes for styling rather than predefined components. This approach enables rapid development and consistent design systems.

Tailwind only use utility classes for styling. When we use Tailwind CSS, we write utility classes directly in our HTML to style elements. While saving, tailwind will only add the necessary CSS classes in production.

Thats's why Tailwind css is lightweight and efficient, making it an excellent choice for modern web development projects.

Install Tailwind

To install Tailwind CSS, you can use npm (Node Package Manager) to add it to your project. First, ensure you have Node.js and npm installed on your machine. Then, run the following command in your project directory:

Install locally

Install globally

Install for MacOS or Linux

Extension for VSCode

To get real time class assiatance in VS Code, install Tailwind CSS IntelliSense extension by Tailwind Labs ( tailwindcss.com ).

To install, click Tailwind CSS Extension

Configuration

After installing Tailwind CSS, you can create a configuration file to customize your setup. Run the following command to generate a default configuration file named tailwind.config.js:

This file allows you to customize various aspects of Tailwind CSS, such as colors, spacing, and breakpoints. You can modify the configuration to suit your project's design requirements.

Usage

Once you have installed Tailwind CSS and configured it, you can start using its utility classes in your HTML. For example, to create a button with a blue background and white text, you would use:

<button class="bg-blue-500 text-white px-4 py-2 rounded">Button</button>
                

This approach allows for rapid development and consistent styling across your project.

Container

In Tailwind CSS, the container is a utility class that provides a fixed width and centers the content on the page. You can use the container class to create a responsive container that adapts to different screen sizes.

The default container width is 100% on small screens and 100% on medium screens, but it becomes fixed at 768px on large screens and 1280px on extra large screens.

   <div class="container mx-auto p-4">...</div>

In this example, the mx-auto class centers the container horizontally, and the p-4 class adds padding to the container.

Grids

Tailwind CSS provides a responsive grid system that allows you to create complex layouts with ease. You can use the grid class to create a grid container, and then use utility classes like grid-cols-1, grid-cols-2, etc., to define the number of columns in your grid.

<div class="grid grid-cols-3 gap-4">...</div>

In this example, the grid-cols-3 class creates a grid with three columns, and the gap-4 class adds a 1rem gap between each grid item.

Responsive Columns

Tailwind CSS allows you to define responsive columns in your grid layouts. You can use classes like grid-cols-1, grid-cols-2, etc., to define the number of columns in your grid. These classes are responsive and will adapt to different screen sizes.

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">...</div>

In this example, the grid starts with one column on small screens, two columns on medium screens, and three columns on large screens.

Buttons

Tailwind CSS provides utility classes for creating buttons with various styles and sizes. You can use classes like bg-blue-500, text-white, px-4, and py-2 to style your buttons.

<button class="bg-red-700 text-white px-4 py-2 rounded">Button</button>

Colors

Tailwind CSS provides a comprehensive color palette with utility classes for text, background, and border colors. You can use classes like text-red-500, bg-blue-500, etc.

<div class="text-red-500 bg-blue-100 border border-gray-300">Colored Element</div>

Margin and Padding

Tailwind CSS provides utility classes for adding margin and padding to elements. You can use classes like m-4, p-4, etc., to add margin and padding to your elements.

<div class="m-4 p-4">margin & padding 1rem</div>

Add Margin

To add margin, use classes like m-4, mt-4, mr-4, etc. m-4 means margin of 1rem (16px). There are total 5 margin classes starting from m-0 to m-4.

Add Padding

To add padding, use classes like p-4, pt-4, pr-4, pb-4, pl-4 etc.

:hover

Tailwind CSS provides utility classes for adding hover effects to elements. You can use the hover: prefix to apply styles when an element is hovered over.

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

In this example, the button's background color changes to a darker blue when hovered over.

Base Classes

Tailwind CSS allows you to create base classes to apply common styles across multiple elements. You can define a base class in your CSS file and then use it in your HTML.

<style>
  .btn-primary {
    @apply bg-blue-500 text-white px-4 py-2 rounded;
  }
</style>
<button class="btn-primary hover:bg-blue-700">Button</button>

In this example, the btn-primary class applies the common button styles, and the hover effect is added separately.

Responsive Images

To make images responsive in Tailwind CSS, you can use the max-w-full and h-auto utility classes. These classes ensure that the image scales appropriately within its container while maintaining its aspect ratio.

<img src="path/to/image.jpg" alt="Description" class="max-w-full h-auto">

In this example, the image will scale down to fit within its container while preserving its original aspect ratio, making it responsive across different screen sizes.

Tables

Tailwind CSS provides utility classes to style tables easily. You can use classes like table-auto, border, and p-2 to create well-styled tables.

<table class="table-auto border-collapse border border-gray-200 w-full">
  ...
</table>

In this example, the table is styled with borders and padding for better readability.

Form

Tailwind CSS provides utility classes to style forms easily. You can use classes like border, p-2, and rounded to create well-styled form elements.

<form class="w-full max-w-sm">
  <div class="mb-4">
    <label class="block text-gray-700 font-bold mb-2" for="username">Username</label>
      <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username">
    </div>
    <div class="mb-6">
      <label class="block text-gray-700 font-bold mb-2" for="password">Password</label>
      <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="******************">
    </div>
    <div class="flex items-center justify-between">
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">Sign In</button>
    </div>
</form>

In this example, the form elements are styled with borders, padding, and rounded corners for a clean look.