Windframe
See all posts

How to use Tailwind CSS in HTML

How to use Tailwind CSS in HTML

Tailwind CSS In Html

Tailwind CSS is a utility-first CSS framework. It provides you with CSS classes that you can use to create designs for your web pages quickly and with ease.

This blog will walk you through the different ways you can add Tailwind CSS in an HTML project, what the limitations could be, what developers that have worked extensively with the Tailwind CSS framework recommend and why, and finally how to properly process Tailwind in your project.

Table of content

Introduction

Tailwind CSS is a utility-first CSS framework designed to help developers quickly build custom user interfaces without ever leaving their HTML 5. Unlike traditional CSS frameworks, Tailwind CSS provides low-level utility classes that can be combined to create unique designs tailored specifically to your needs.

Prerequisites

Before proceeding, make sure you have the following:

  • Basic knowledge of HTML and CSS.
  • A text editor or IDE (Integrated Development Environment) such as Visual Studio Code.
  • Node.js installed on your computer if you plan to install Tailwind CSS via NPM

Method 1: Using the Tailwind CSS CDN

The fastest way to start using Tailwind CSS in your HTML project is by adding its Content Delivery Network (CDN) link to the <head> section of your HTML file. This method is perfect for quick prototypes or small projects where setting up a build process might not be necessary.

html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Tailwind CSS CDN Example</title>
		<!-- Add Tailwind CSS via CDN -->
		<script src="https://cdn.tailwindcss.com"></script>
	</head>
	<body>
		<div
			class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4"
		>
			<div>
				<div class="text-xl font-medium text-black">Tailwind CSS</div>
				<p class="text-gray-500">Using the CDN is easy!</p>
			</div>
		</div>
	</body>
</html>

This example demonstrates how to include Tailwind CSS using the CDN and style a simple card component.

Method 2: Installing Tailwind CSS via NPM

For larger projects or those requiring more customization, installing Tailwind CSS via NPM is recommended. Follow these steps:

  • Install Node.js – Ensure Node.js is installed on your system.
  • Create a Project Directory – Set up a new directory for your project.
  • Initialize npm – Run npm init -y to create a package.json file.
  • Install Tailwind CSS – Execute npm install tailwindcss postcss autoprefixer.
  • Initialize Tailwind CSS – Run npx tailwindcss init to generate the configuration files.

Configuring Your Project with Tailwind CSS

After installation, configure your project by editing the tailwind.config.js file to specify the files Tailwind should scan for class names:

js
module.exports = {
	content: ["./index.html"],
	theme: {
		extend: {},
	},
	plugins: [],
};

Additionally, set up PostCSS by creating or modifying the postcss.config.js file:

js
module.exports = {
	plugins: {
		tailwindcss: {},
		autoprefixer: {},
	},
};

Building Your First HTML Page with Tailwind CSS

Once configured, create an index.css file and add the Tailwind directives:

css
@tailwind base;
@tailwind components;
@tailwind utilities;

Then, import this file into your HTML document:

html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>My First Tailwind CSS Project</title>
		<link href="/dist/output.css" rel="stylesheet" />
	</head>
	<body>
		<div
			class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4"
		>
			<div class="flex justify-center items-center mt-10">
				<button
					class="bg-indigo-500 hover:bg-indigo-400 text-white font-bold py-2 px-4 rounded"
				>
					Click Me!
				</button>
			</div>
		</div>
	</body>
</html>

To compile your styles, run npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch.

Preview

Conclusion

By following this guide, you’ve learned how to use Tailwind CSS in HTML effectively, whether through the CDN or by integrating it into your project via NPM. Tailwind CSS empowers developers to create beautiful, responsive designs quickly and efficiently, making it an excellent choice for modern web development projects.

Back to blog posts

Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs

Start building stunning tailwind UIs! 

Build from scratch or select prebuilt tailwind templates
Learn more about Windframe