See all posts

How to use Tailwind CSS in HTML

How to use 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.

Frequently Asked Questions

How do I add Tailwind CSS to an HTML file?

The quickest way to add Tailwind CSS to an HTML file is by including the Tailwind CDN script tag in the <head> section of your document. Simply add <script src="https://cdn.tailwindcss.com"></script> and you can immediately start using Tailwind utility classes in your HTML. For production projects, installing Tailwind via NPM gives you more control over configuration and optimization.

Can I use Tailwind CSS without npm or Node.js?

Yes, you can use Tailwind CSS without npm or Node.js by using the Tailwind CDN. This approach lets you add Tailwind to any HTML file with a single script tag, making it ideal for quick prototypes and small projects. However, the CDN version does not support custom configurations, plugins, or tree-shaking for optimal file size.

What is the easiest way to get started with Tailwind CSS?

The easiest way to get started with Tailwind CSS is by adding the CDN link to your HTML file’s <head> section. This requires no build tools, no installation, and no configuration. You can begin applying utility classes like bg-blue-500, text-white, and p-4 to your HTML elements immediately.

Is Tailwind CSS CDN suitable for production?

The Tailwind CSS CDN is not recommended for production use because it loads the entire framework, resulting in a much larger file size than necessary. For production, you should install Tailwind via NPM and use its built-in purge feature to remove unused styles, which can reduce your CSS file to just a few kilobytes. The CDN is best suited for prototyping, learning, and small personal projects.

How do I customize Tailwind CSS colors in HTML?

To customize Tailwind CSS colors, you need to modify the tailwind.config.js file by extending the theme’s color palette with your own values. This requires the NPM installation method, as the CDN version offers limited customization. Once configured, you can use your custom colors just like built-in ones, for example bg-brand-blue or text-custom-green, across all your HTML elements.

Back to blog posts

Windframe is an AI visual editor for rapidly building stunning web UIs & websites

Start building stunning web UIs & websites!

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