Tailwind CSS: Basic with Tailwind CLI
2 min readOct 8, 2024
Reference: https://tailwindcss.com/docs/installation
Prerequisite: nodejs with npm installed
Step 1: Make directory myproject
> mkdir myproject
Step 2: Install tailwindcss and initial tailwind project
> cd myproject
myproject> npm install -D tailwindcss
myproject> npx tailwindcss init
Step 3: Configure template path tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"], //updated
theme: {
extend: {},
},
plugins: [],
}
Step 4: Add base tailwind directive in src/input.css
Create src folder and create src/input.css file
@tailwind base;
@tailwind components;
@tailwind utilities;
Step 5: Build tailwind as src/output.css
myproject> npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
Step 6: Create src/index.html and Start using tailwind using output.css
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./output.css" rel="stylesheet">
</head>
<body>
<div class="container mx-auto p-4">
<h1 class="text-3xl font-bold">
Hello world!
</h1>
<p>Getting Started with Tailwind</p>
</div>
</body>
</html>
Step 7: Open src/index.html with browser