How to Add Tailwind CSS 🎨 to a Project 👩‍💻

#html #css #tailwindcss #javascript

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.

1. 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 section:

<!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.

2. A More Flexible Option: Install Tailwind with NPM 📦

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:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    '{html,js}', // Adjust the path and file extensions as per your project structure
    'index.html' // Include your main HTML file if applicable
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add Tailwind Directives to a CSS File: Create a style.css file in your project root and add:

@tailwind base;
@tailwind components;
@tailwind utilities;

Add a build script in the package.json:

{
  "devDependencies": {
    "autoprefixer": "^10.4.20",
    "postcss": "^8.5.1",
    "tailwindcss": "^3.4.17"
  },
  "scripts": {
    "build": "tailwindcss -i ./style.css -o ./dist/output.css --watch"
  }
}

Run the build command to generate the compiled CSS:

npm run build

🔗Link the generated CSS in Your HTML: Add the compiled CSS file to your HTML:

<link href="./dist/style.css" rel="stylesheet">

⚡ Start Coding with Tailwind: Use Tailwind classes in your HTML as needed :

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

3. 💻 For Fans of Command-Line: 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:

npm install -g tailwindcss

Create an input CSS file (input.css) with the following content:

@tailwind base;
@tailwind components;
@tailwind utilities;

Use the CLI to compile the CSS:

tailwindcss -i ./input.css -o ./output.css

Link the compiled CSS in your HTML:

<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 your questions in the comment section 👇