1. CDN Method (Best For Beginners)


<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>

<h1 class="text-4xl font-bold text-blue-500">
Hello Tailwind
</h1>

</body>
</html>


2. Vite + Tailwind Installation

Step 1

Create Project

npm create vite@latest my-project
cd my-project

Step 2

Install Dependencies

npm install

Step 3

Install Tailwind CSS

npm install tailwindcss @tailwindcss/vite

Step 4

Configure the Vite plugin

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
 plugins: [
  tailwindcss(),
 ],
})


Step 5

Import Tailwind CSS to your css file

@import "tailwindcss";