ElianCodes

← Back to blog

Implementing UnoCSS in Astro

UnoCSS is a CSS engine, built by Anthony Fu. It’s rather a CSS engine than a CSS library. It’s crazy fast, supports presets and is designed for flexibility and performance. I wanted to give this one a try, since I met Anthony last week at JSWorld, and I’m totally blast away by his work.

Astro Integration

It’s quite easy, since UnoCSS has a third party integration for Astro (thus you can’t install it through astro add CLI). Let’s take a look at how to implement it.

Let’s first install the integration for Astro and the reset package.

pnpm add @unocss/astro @unocss/reset

Now, since we didn’t use astro add to install the integration, we need to add it to our astro.config.mjs file manually.

Also, I noticed that the integration doesn’t work wit Node < v18, so be sure you’re on Node v18!

import { defineConfig } from "astro/config";
import unocss from "@unocss/astro";

export default defineConfig({
  integrations: [
    /* ... */
    unocss(),
  ],
});

Now you should have a clean and resetted website. Let’s add an integration to start writing utility-first CSS.

Presets and Configuration

pnpm add @unocss/preset-wind
import { defineConfig } from "astro/config";
import unocss from "@unocss/astro";
import presetWind from "@unocss/preset-wind";

// https://astro.build/config
export default defineConfig({
  integrations: [
    unocss({
      presets: [
        presetWind(),
        /* more presets */
      ],
      safelist: [
        /* this you can use to exclude utilities from purge */
      ],
    }),
  ],
});

Now you can use all the classes / utilities from the WindCSS library, in UnoCSS!

Of course, there are many many more presets available, you can check them out here.

Another awesome usecase and one of the drivers for me to use it, is the integration from UnoCSS with pure CSS icons! You can find that part of the repo here, but it’s quite easy and straightforward.

Tag me on Twitter if you have any questions or feedback!

Written by Elian Van Cutsem

← Back to blog
  • Elians Astro Startkit

    Elians Astro Startkit

    I just published the setup I use for my personal projects. You can read more about it in this blogpost.

  • So, I'm leaving vBridge

    So, I'm leaving vBridge

    After spending a couple of years at vBridge Cloud, I'm leaving the company. I've worked at vBridge eversince I graduated. Now, It's time for a new adventure! I'm joining the DX-team at Astro full-time!

  • Becoming an Astro maintainer

    Becoming an Astro maintainer

    Since a week, I'm an Astro maintainer, in this post, I describe the process and my start in open source. I also give some insight in what I'm planning to work on.

  • 🍱 Brutal: A theme for Astro

    🍱 Brutal: A theme for Astro

    Brutal is a minimal neobrutalist theme for Astro. It's based on Neobrutalist Web Design, a movement that aims to create websites with a minimalistic and functional design. It has some integrations like Image Optimization, RSS, Sitemap, ready to get your SEO done right.

  • 🎤 Am I an international public speaker now?

    🎤 Am I an international public speaker now?

    A few weeks ago, I gave my first international keynote talk at JSWorld in Amsterdam. In this blogpost, I wanted to share some insights about the conference and my talk.

  • ✨ Building Blog tag index pages in Astro

    ✨ Building Blog tag index pages in Astro

    I wanted to add blog tag collection pages to my website. This way, people could filter on tags I used in my blog posts. Here is a guide on how I implemented it.