Move On from Bootstrap and TailwindCSS with UnoCSS
Tired of the same old Bootstrap look? Moved on to TailwindCSS but still not satisfied? If WindiCSS couldn't win your heart, let's try UnoCSS!
- Fauzan My
- 3 min read
Bootstrap is the go-to CSS framework with ready-made components. TailwindCSS, on the other hand, is a utility-first framework that offers a plethora of classes for every CSS feature, allowing you to style your UI directly in your HTML markup.
WindiCSS came along as an alternative to Tailwind, but it didn’t quite take off. That’s when UnoCSS entered the scene, a flexible, speedy, and lightweight CSS on Demand engine.
What is UnoCSS?
UnoCSS is an instant atomic CSS approach, evolving as a utility-first CSS solution with various presets. Unlike traditional CSS frameworks, UnoCSS is a high-performance atomic styling engine, letting you write styles directly in your HTML markup. Think Tailwind, but much lighter, faster, and more efficient.
For more details, check out this piece from the founding-father of UnoCSS.
Why I Chose UnoCSS
You might wonder why I decided to switch to UnoCSS. Did I join the “I Hate TailwindCSS” club?
Not at all. I still use TailwindCSS. But when starting a new project, even a tiny template with Tailwind can produce a bloated build file.
Before diving in, read this article on disabling unwanted TailwindCSS classes.
This frustration led me to search for a TailwindCSS-like alternative. That’s how I found WindiCSS. Unfortunately, the WindiCSS project was sunsetted. From the WindiCSS website, the developers recommended UnoCSS as an alternative.
How to Install UnoCSS
Typically, UnoCSS is integrated with frontend tools like Vite, VueJS, Svelte, ReactJS, and similar frameworks.
Here, I’ll show you how to install UnoCSS standalone via the CLI, similar to installing TailwindCSS.
Step 0: Initialize the UnoCSS Project
In your new project directory (open in Terminal), type the following command:
$ npm init -y
Step 1: Install UnoCSS
Run the command:
$ npm install -D unocss
Step 2: Create the Config File
Create a config file using JavaScript (uno.config.js) or TypeScript (uno.config.ts). I’ll use JavaScript.
// uno.config.js
import { defineConfig } from 'unocss'
export default defineConfig({
cli: {
entry: {
patterns: ['./src/*.html'],
outFile: './src/style.css'
},
},
})
Step 3: Add Dev Script to package.json
Add the following script: “scripts”: “unocss –watch”.
Here’s the complete package.json setup:
{
"name": "amplate",
"version": "0.1.0",
"description": "AMP template built with UnoCSS",
"main": "index.js",
"scripts": {
"dev": "unocss --watch"
},
"keywords": ["amplate", "amp", "unocss", "tailwindcss"],
"author": "Fauzan My",
"license": "ISC",
"devDependencies": {
"unocss": "^0.61.2"
}
}
Step 4: Create an HTML File
In the src directory, create an index.html file with the following structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Amplate - AMP Template built with TailwindCSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="py-2 px-4">
<h1 class="text-2xl font-bold">Amplate</h1>
</header>
<main class="px-4 py-12 space-y-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati mollitia eius, voluptatum architecto soluta exercitationem, voluptatem voluptates est, reprehenderit animi quo provident? Exercitationem quaerat voluptatem distinctio quidem sit repellendus perspiciatis!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati mollitia eius, voluptatum architecto soluta exercitationem, voluptatem voluptates est, reprehenderit animi quo provident? Exercitationem quaerat voluptatem distinctio quidem sit repellendus perspiciatis!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati mollitia eius, voluptatum architecto soluta exercitationem, voluptatem voluptates est, reprehenderit animi quo provident? Exercitationem quaerat voluptatem distinctio quidem sit repellendus perspiciatis!</p>
</main>
<footer class="px-4 py-8">
<small>Copyright 2024 Amplate. All rights reserved.</small>
</footer>
</body>
</html>
Step 5: Run the Dev Script
$ npm run dev
If your terminal shows the following output:
> [email protected] dev
> unocss --watch
unocss v0.61.2 21:29:40
◐ UnoCSS in watch mode... 21:29:40
PS C:\Users\Fauzan\Apps\amplate>
Tada! UnoCSS is now running and ready to generate style.css based on the classes used in the registered files, in this case, index.html.
