How to Set Up Tailwind CSS in HTML, CSS and JavaScript Projects
Learn how to install and configure Tailwind CSS in a normal HTML, CSS, and JavaScript project. Step-by-step guide with examples, responsive design, and best practices.
How to Set Up Tailwind CSS in a Normal HTML, CSS, and JavaScript Project
Tailwind CSS is commonly used with frameworks like React and Next.js.
However, you can also use Tailwind CSS in a simple HTML, CSS, and JavaScript project without any framework.
This is a great way for beginners to learn Tailwind CSS before moving into modern frontend frameworks.
In this guide, you'll learn how to install and configure Tailwind CSS in a traditional web development project.
Why Use Tailwind CSS in a Vanilla Project?
Using Tailwind CSS in a normal HTML project helps you:
- learn Tailwind fundamentals
- build responsive websites faster
- understand utility-first styling
- prepare for React and Next.js projects
- reduce custom CSS
Many developers start with vanilla projects before adopting frameworks.
Project Structure
A typical project structure looks like this:
project-folder/
│
├── src/
│ ├── input.css
│
├── dist/
│ ├── output.css
│
├── index.html
│
├── package.json
│
└── tailwind.config.js
This structure keeps source files organized and scalable.
Step 1: Create a New Project
Create a new folder:
mkdir tailwind-project
Move into the folder:
cd tailwind-project
Initialize npm:
npm init -y
This creates a package.json file.
Step 2: Install Tailwind CSS
Install Tailwind CSS and related packages:
npm install tailwindcss @tailwindcss/cli
This installs the required Tailwind packages.
Step 3: Create CSS Source File
Create a folder:
src/
Inside it create:
input.css
Add:
@import "tailwindcss";
This imports all Tailwind utilities.
Step 4: Build Tailwind CSS
Run:
npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --watch
What this command does:
| Option | Purpose |
|---|---|
| -i | Input CSS |
| -o | Output CSS |
| --watch | Rebuild automatically |
Tailwind will now generate your CSS file automatically.
Step 5: Connect Tailwind CSS to HTML
Create:
index.html
Add:
<!DOCTYPE html>
<html>
<head>
<title>Tailwind Project</title>
<link
rel="stylesheet"
href="./dist/output.css"
/>
</head>
<body>
<h1>Hello Tailwind CSS</h1>
</body>
</html>
Your generated Tailwind CSS is now connected to the webpage.
Step 6: Test Tailwind CSS
Replace the heading with:
<h1
class="
text-4xl
font-bold
text-blue-500
text-center
mt-10
"
>
Hello Tailwind CSS
</h1>
Open the HTML file in the browser.
You should see:
- large text
- blue color
- centered alignment
- top margin
This confirms Tailwind CSS is working correctly.
Understanding Common Tailwind Classes
Example:
<h1
class="
text-4xl
font-bold
text-blue-500
"
>
Hello Tailwind
</h1>
| Class | Purpose |
|---|---|
| text-4xl | Large text |
| font-bold | Bold font |
| text-blue-500 | Blue text color |
Utility classes can be combined to create designs quickly.
Creating a Button
Example:
<button
class="
bg-blue-500
text-white
px-4
py-2
rounded-md
"
>
Click Me
</button>
Result:
- blue background
- white text
- padding
- rounded corners
No custom CSS required.
Creating a Responsive Card
Example:
<div
class="
max-w-sm
mx-auto
p-6
bg-white
rounded-xl
shadow-md
"
>
<h2
class="
text-xl
font-bold
"
>
Product Card
</h2>
<p
class="
text-gray-600
mt-2
"
>
Sample Description
</p>
</div>
This creates a professional card component using only Tailwind utilities.
Responsive Design Example
One of Tailwind's biggest advantages is responsive styling.
Example:
<h1
class="
text-xl
md:text-3xl
lg:text-5xl
"
>
Responsive Heading
</h1>
Behavior:
| Screen Size | Font Size |
|---|---|
| Mobile | text-xl |
| Tablet | text-3xl |
| Desktop | text-5xl |
No media queries are needed.
Using Tailwind with JavaScript
Tailwind works perfectly with JavaScript.
Example:
<button
id="themeBtn"
class="
bg-black
text-white
px-4
py-2
"
>
Change Text
</button>
const btn =
document.getElementById(
"themeBtn"
);
btn.addEventListener(
"click",
() => {
btn.textContent =
"Clicked!";
}
);
Tailwind handles styling while JavaScript handles behavior.
Watch Full Tailwind CSS Setup Tutorial
If you prefer video learning, watch the complete tutorial below where we configure Tailwind CSS in a normal HTML, CSS, and JavaScript project.
Watch the Full Tailwind CSS Setup Tutorial
This tutorial demonstrates the complete setup process step-by-step.
Common Beginner Mistakes
Forgetting to Run the Build Command
Without running the Tailwind build command, no CSS file is generated.
Linking the Wrong CSS File
Always link:
./dist/output.css
not the source file.
Using Old Installation Commands
Tailwind CSS v4 uses:
npm install tailwindcss @tailwindcss/cli
Make sure you're following the latest setup method.
Writing Too Much Custom CSS
Tailwind is designed to reduce custom CSS.
Try using utility classes first.
Internal Learning Recommendation
Before learning Tailwind CSS setup, make sure you understand:
Tailwind builds on top of core CSS concepts.
Build Something
Practice what you've learned by creating:
- Hero Section
- Product Card
- Navigation Bar
- Login Form
- Pricing Card
Building projects is the fastest way to learn Tailwind CSS.
Production Tip
Professional developers usually:
- organize source files properly
- use reusable components
- leverage responsive utilities
- avoid unnecessary custom CSS
- combine Tailwind with component-based architectures
Good project structure makes Tailwind projects easier to maintain.
Why Learning Tailwind Setup Matters
Understanding how Tailwind works in a normal HTML project helps developers:
- learn Tailwind fundamentals
- understand build processes
- prepare for React and Next.js
- create lightweight projects
- improve frontend development skills
It provides a strong foundation for modern frontend development.
Conclusion
Setting up Tailwind CSS in a normal HTML, CSS, and JavaScript project is straightforward and provides an excellent way to learn utility-first styling.
Once you're comfortable with the setup process, you'll be ready to use Tailwind CSS in larger projects built with React, Next.js, and other modern frameworks.