This content originally appeared on DEV Community and was authored by TriumphantCode
If you're building a project using HTML, CSS, and vanilla JavaScript and want to take advantage of Tailwind CSS's utility-first approach, you're in the right place. Tailwind can be easily used in a project without React or fancy frameworks. Here’s a step-by-step guide to adding Tailwind CSS to your HTML project using simple and advanced methods.
- The Simplest Way: Use the Tailwind CDN 🌐 The fastest way to start using Tailwind CSS is by adding its Content Delivery Network (CDN) link to your HTML file. This approach is perfect for quick or small projects.
Steps:
Add the following tag to your HTML file inside the
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Example</title>
<!-- Tailwind CSS via CDN -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.3.2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold text-center">Hello, Tailwind CSS!</h1>
</body>
</html>
Could you save your file and open it in a browser? You’ll immediately see Tailwind's styling applied!
Tip: While the CDN is convenient, it includes all Tailwind utilities, which can make the file large.
- A More Flexible Option: Install Tailwind with NPM Steps: Set Up Your Project:
Create a project folder and initialize it with npm:
mkdir tailwind-html
cd tailwind-html
npm init -y
Install Tailwind CSS: Install Tailwind along with PostCSS and Autoprefixer:
npm install tailwindcss postcss autoprefixer
npx tailwindcss init
Configure Tailwind:
In the tailwind.config.js file, specify the location of your HTML files:
javascript
module.exports = {
content: ["./*.html"],
theme: {
extend: {},
},
plugins: [],
};
Add Tailwind Directives to a CSS File:
Create a style.css file in your project root:
CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
Generate the Tailwind CSS File:
Add a build script in package.json:
JSON
"scripts": {
"build": "npx tailwindcss -i ./style.css -o ./dist/style.css --watch"
}
Run the build command to generate the compiled CSS:
bash
npm run build
Link the Generated CSS in Your HTML: Add the compiled CSS file to your HTML:
html
<link href="./dist/style.css" rel="stylesheet">
Start Coding with Tailwind: Use Tailwind classes in your HTML as needed:
html
<h1 class="text-3xl font-bold text-blue-500">Hello, Tailwind!</h1>
- For Command-Line Enthusiasts: Use the Tailwind CLI The Tailwind CLI is a great alternative if you prefer avoiding npm dependencies while still having a custom build.
Steps:
Install the Tailwind CLI globally:
bash
Copy code
npm install -g tailwindcss
Generate a Tailwind CSS File:
Create an input CSS file (input.css) with the following content:
css
Copy code
@tailwind base;
@tailwind components;
@tailwind utilities;
Use the CLI to compile the CSS:
bash
Copy code
tailwindcss -i ./input.css -o ./output.css
Link the compiled CSS in your HTML:
html
Copy code
<link href="./output.css" rel="stylesheet">
When to Use Which Method?
CDN: Ideal for quick experiments and prototypes.
NPM: Best for scalable projects where you want to optimize CSS size.
CLI: Suitable for lightweight setups without the need for a full npm environment.
Tailwind CSS is incredibly versatile and can be easily adapted for simple HTML projects, whether you're prototyping or building something more advanced. By choosing the method that suits your needs, you can unlock the full potential of Tailwind’s utility-first framework in your workflow.
You can drop any other method that has been tested and worked👇😊
This content originally appeared on DEV Community and was authored by TriumphantCode
TriumphantCode | Sciencx (2025-01-19T20:18:33+00:00) How to Add Tailwind CSS 🎨 to a Project 👩💻. Retrieved from https://www.scien.cx/2025/01/19/how-to-add-tailwind-css-%f0%9f%8e%a8-to-a-project-%f0%9f%91%a9%f0%9f%92%bb/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.