Setting Up Tailwind CSS with CDN

Tutorial 3 of 5

Setting Up Tailwind CSS with CDN

1. Introduction

Goal of the Tutorial

This tutorial will guide you through the process of setting up Tailwind CSS with a CDN (Content Delivery Network) in your project. A CDN helps improve the performance of your website by serving assets from a location closer to the user.

Learning Outcomes

By the end of this tutorial, you will be able to:
- Link Tailwind CSS to your HTML files using a CDN
- Understand how to use Tailwind CSS classes in your markup

Prerequisites

Basic knowledge of HTML/CSS

2. Step-by-Step Guide

Concepts

Tailwind CSS: A utility-first CSS framework that provides low-level utility classes to let you build completely custom designs without ever leaving your HTML.

CDN: A content delivery network (CDN) is a system of distributed servers that deliver pages and other web content to a user based on the geographic locations of the user.

Steps

Link the Tailwind CSS CDN to your HTML file

Add the following link tag in the <head> section of your HTML file.

<link href="https://cdn.tailwindcss.com/2.2.19/tailwind.min.css" rel="stylesheet">

Start Using Tailwind CSS in your HTML

You can now start using Tailwind CSS classes in your markup. For example, to create a responsive grid layout with three equal-width columns, you could write:

<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-500 text-white p-4">Column 1</div>
  <div class="bg-blue-500 text-white p-4">Column 2</div>
  <div class="bg-blue-500 text-white p-4">Column 3</div>
</div>

Code Examples

Example 1: Creating a Button

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

bg-blue-500: Applies a blue background
hover:bg-blue-700: Darkens the background on hover
text-white: Applies white text color
font-bold: Applies bold font weight
py-2 px-4: Adds vertical and horizontal padding
rounded: Rounds the corners

Example 2: Creating a Responsive Layout

<div class="container mx-auto px-4">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
    <!-- Column Content -->
  </div>
</div>

container: Centers the content and adds horizontal padding
mx-auto: Auto margins on the horizontal axis centers the container
px-4: Adds horizontal padding
grid: Creates a CSS grid container
grid-cols-1 sm:grid-cols-2 md:grid-cols-3: Creates a responsive grid with 1 column on small screens, 2 on medium screens, and 3 on large screens
gap-4: Adds gutters between the grid columns

4. Summary

In this tutorial, you've learned how to set up Tailwind CSS with a CDN in your project and started using it in your HTML files. You've seen how to link the Tailwind CSS CDN to your HTML file and how to use Tailwind CSS classes in your markup.

5. Practice Exercises

Exercise 1

Create a form with two input fields (for name and email) and a submit button using Tailwind CSS.

Exercise 2

Create a card with an image on the top, title, description, and a "Read More" button.

Exercise 3

Create a responsive navbar with three links: Home, About, and Contact.

Tip: Use the sm, md, lg classes to make the layout responsive.

For solutions and more exercises, visit the Tailwind CSS documentation.

Happy coding!