VOOZH about

URL: https://www.geeksforgeeks.org/css/how-to-add-tailwind-css-to-html/

⇱ How to Add Tailwind CSS to HTML ? - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

How to Add Tailwind CSS to HTML ?

Last Updated : 23 Jul, 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

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:


  • 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.
Comment