How to Add Tailwind CSS to HTML ?

Last Updated : 10 Jan, 2025

Tailwind CSS is a utility-first framework offering pre-defined classes for rapid styling of HTML elements. It simplifies customization and accelerates web development workflows.

Integration Options:

CDN Integration: Quickly add Tailwind CSS via a CDN link in the <head> of your HTML.
Using npm: Install Tailwind CSS through npm for advanced customization and build processes.

Adding Tailwind CSS to HTML Using a CDN Link

The quickest way to start using Tailwind CSS is by adding a link to the Tailwind CSS CDN in the <head> section of your HTML file. This method is suitable for small projects or for trying out Tailwind CSS.

Example

HTML

<html>
<head>
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
    <h1 class="text-3xl font-bold underline text-green-600">
        Welcome to GeeksforGeeks
    </h1>
</body>
</html>

In this Example:

Tailwind CSS Integration: The <link> tag in the <head> section includes Tailwind CSS via a CDN, enabling utility classes for styling.
Styled Heading: The <h1> element uses Tailwind classes to appear as a bold, underlined, large green heading

Add Tailwind CSS to HTML using npm for a Custom Build

For larger projects or when you need to customize Tailwind CSS, it's recommended to install Tailwind CSS via npm and set up a build process.

Step 1: Initialize npm

Create a new directory for your project and initialize npm:

mkdir tailwind-project
cd tailwind-project
npm init -y

Step 2: Install Tailwind CSS

Install Tailwind CSS and its dependencies:

npm install -D tailwindcss postcss autoprefixer

Step 3: Generate Tailwind Configuration

Generate the tailwind.config.js and postcss.config.js files:

npx tailwindcss init -p

Step 4: Create your CSS file

Create a styles.css file in your project directory and add the Tailwind directives:

/* styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Step 5: Build your CSS

Add a build script to your package.json file:

"scripts": {
    "build": "tailwindcss -i ./styles.css -o ./dist/output.css --watch"
}

Run the build script to generate your output.css file:

npm run build

Step 6: Link the CSS in your HTML

Link the generated output.css file in your HTML file:

HTML

<html>
<head>
    <link href="./dist/output.css" rel="stylesheet">
</head>
<body>
    <h1 class="text-3xl font-bold underline text-green-600">
        Welcome to GeeksforGeeks
    </h1>
</body>
</html>

Tailwind CSS Integration: The <link> tag in the <head> section includes a custom-built Tailwind CSS file (output.css), enabling utility classes for styling.
Styled Heading: The <h1> element uses Tailwind classes to appear as a bold, underlined, large green heading.

How to Add Text Shadow in Tailwind CSS?

vkash8574

Improve

Article Tags :