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? 😃
Step 4: Link Tailwind in Your HTML
Last step! Add your newly generated CSS file to your HTML so you can start using Tailwind’s classes right away.
Example index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS with Vanilla HTML</title>
<link href="./output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello, Tailwind CSS! 🎉
</h1>
</body>
</html>
Why You'll Love Tailwind CSS
- 🚀 Fast Development – No need to write custom CSS; just use utility classes.
- 🎨 Highly Customizable – Configure styles with Tailwind’s easy-to-use settings.
- 📱 Mobile-Friendly – Responsive design is built right in!
- 🔥 Optimized Performance – Unused styles are removed, keeping your CSS lightweight.
Wrap-Up
And that’s it! 🎉 With just a few simple steps, you now have Tailwind CSS set up with vanilla HTML, CSS, and JavaScript. Now you can enjoy fast and flexible styling for your web projects. Give it a try, and let me know what cool designs you come up with!
Happy coding! 😃
Top comments (2)
... in custom unstructured sequences of custom class names.
... which are nothing more than plain CSS custom properties.
... which does not actually mean "responsiveness", but rather "presets for arbitrarily defined breakpoints in a Bootstrap-era fashion that still don't get what a breakpoint actually is."
... which has basically never been a performance problem.
Thanks for your detailed thoughts!