DEV Community

TriumphantCode
TriumphantCode

Posted on

3 1

How to Add Tailwind CSS ๐ŸŽจ to a Project ๐Ÿ‘ฉโ€๐Ÿ’ป

Image descriptionIf 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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • Install Tailwind CSS: Install Tailwind along with PostCSS and Autoprefixer:
npm install tailwindcss postcss autoprefixer
npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode
  • โš™๏ธ 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: [],
}
Enter fullscreen mode Exit fullscreen mode
  • Add Tailwind Directives to a CSS File: Create a style.css file in your project root and add:
@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode
  • 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"
  }
}
Enter fullscreen mode Exit fullscreen mode
  • Run the build command to generate the compiled CSS:
npm run build
Enter fullscreen mode Exit fullscreen mode
  • ๐Ÿ”—Link the generated CSS in Your HTML: Add the compiled CSS file to your HTML:
<link href="./dist/style.css" rel="stylesheet">


Enter fullscreen mode Exit fullscreen mode
  • โšก Start Coding with Tailwind: Use Tailwind classes in your HTML as needed :
<h1 class="text-3xl font-bold text-blue-500">Hello, Tailwind!</h1>

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • Create an input CSS file (input.css) with the following content:
@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode
  • Use the CLI to compile the CSS:
tailwindcss -i ./input.css -o ./output.css
Enter fullscreen mode Exit fullscreen mode
  • Link the compiled CSS in your HTML:
<link href="./output.css" rel="stylesheet">

Enter fullscreen mode Exit fullscreen mode

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 ๐Ÿ‘‡

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (1)

Collapse
 
wisdomudo profile image
WISDOMUDO โ€ข

Nice job, thanks for sharing.

Sentry image

See why 4M developers consider Sentry, โ€œnot bad.โ€

Fixing code doesnโ€™t have to be the worst part of your day. Learn how Sentry can help.

Learn more

๐Ÿ‘‹ Kindness is contagious

Please leave a โค๏ธ or a friendly comment on this post if you found it helpful!

Okay