Introduction
Install using CLI Tool
Step 1: Install node
Step 2:Install tailwindcss via npm
npm install -D tailwindcss
Step 3:Create your tailwind config file by running this command
npx tailwindcss init
Step 4: Add this line in module.exports in tailwind.config.js
content: ["./src/**/*.{html,js}"],
Step 5:Add these lines in input.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Step 6: Run the command to generate css
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
Step 7: Place this line just above the closing of the head tag of index.html
<link href="/dist/output.css" rel="stylesheet">
Install Using CDN
Create a new file index.html and paste the following code
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
Open the index.html file using the browser or using the live server extension in VS Code.
