How to Use Tailwind CSS with Vanilla HTML, CSS, and JavaScript

Hey there! Want to style your website quickly without writing tons of custom CSS? Tailwind CSS has got you covered! It's a utility first framework that scans your HTML, JavaScript, and templates for class names, generates styles, and compiles them into a neat CSS file. Plus, it's super fast and flexible! Getting Started with Tailwind CSS The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. The CLI is also available as a standalone executable if you want to use it without installing Node.js. Step 1: Install Tailwind CSS First, open your terminal and run: npm install tailwindcss @tailwindcss/cli This installs Tailwind and its CLI tool so you can start using it right away. Step 2: Import Tailwind in Your CSS Next, create a CSS file (let’s call it src/input.css) and add these lines: @import "tailwindcss"; This ensures that all the essential styles are included in your project. Step 3: Generate Your Tailwind CSS File Now, let’s tell Tailwind to scan your files and generate the final CSS: npx tailwindcss -i ./src/input.css -o ./src/output.css --watch This command watches for any changes in your files and updates your CSS automatically. No more manual updates nice, right?

Apr 7, 2025 - 13:39

How to Use Tailwind CSS with Vanilla HTML, CSS, and JavaScript

Hey there! Want to style your website quickly without writing tons of custom CSS? Tailwind CSS has got you covered! It's a utility first framework that scans your HTML, JavaScript, and templates for class names, generates styles, and compiles them into a neat CSS file. Plus, it's super fast and flexible!

Getting Started with Tailwind CSS

The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. The CLI is also available as a standalone executable if you want to use it without installing Node.js.

Step 1: Install Tailwind CSS

First, open your terminal and run:

npm install tailwindcss @tailwindcss/cli

This installs Tailwind and its CLI tool so you can start using it right away.

Step 2: Import Tailwind in Your CSS

Next, create a CSS file (let’s call it src/input.css) and add these lines:

@import "tailwindcss";

This ensures that all the essential styles are included in your project.

Step 3: Generate Your Tailwind CSS File

Now, let’s tell Tailwind to scan your files and generate the final CSS:

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

This command watches for any changes in your files and updates your CSS automatically. No more manual updates nice, right?