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.