Switching to UnoCSS

Replacing TailwindCSS with UnoCSS in a VitePress project

In a previous blogpost I had mentioned wanting to use UnoCSS to style my site, but I ended up using TailwindCSS because I didn't think that VitePress had the ability to use Vite plugins. I was happy to learn that I was mistaken when I found this github issue.

Basically, this issue asks that vite.config.js be loaded and used by VitePress, allowing the use of other Vite plugins, thus enabling the use of UnoCSS and many other Vite plugins should I choose to use any in the future 😁

Adding UnoCSS

To actually add UnoCSS, first I had to remove Tailwind from the package.json, remove its use in .vitepress/theme/style.css, and remove the tailwind.config.js and postss.config.js files.

Then I had to install UnoCSS

pnpm add -D unocss

and create vite.config.js

import Unocss from 'unocss/vite'
import { presetUno } from 'unocss'

export default {
  plugins: [
    Unocss({
      presets: [presetUno()],
    }),
  ],
}

Then, in .vitepress/theme.index add the following line to load the styles

import 'uno.css'

After all that, the site looks like this:

Style Reset

Well that's not right. I forgot to add the style reset. Luckily, UnoCSS comes with some style reset packages.

All you've got to do to add them is install the style reset and import it where you're importing uno.css

npm i @unocss/reset

I chose Tailwind Preflights because it was what I was using previously and it meant that I didn't have to change how I styled anything.

import 'uno.css'
import '@unocss/reset/tailwind.css'

Now the homepage looks like this:

Much better!

Typography

The last step is to get the typography back with the UnoCSS Typography Package and the site should look almost exactly the same as before! I say almost because the way UnoCSS typography is styled is a bit different.

Right now a blog post looks like this:

pnpm add @unocss/preset-typography -D

vite.config.js

import Unocss from 'unocss/vite'
import { presetUno } from 'unocss'
import { presetTypography } from '@unocss/preset-typography'

export default {
  plugins: [
    Unocss({
      presets: [presetUno(), presetTypography()],
    }),
  ],
}

and bada bing bada boom we have styled typography.

The last thing to do is style up some of the elements like hr and pre

To do this, I added some stlye changes to the presetTypography plugin:

presetTypography({
  cssExtend: {
    hr: {
      background: 'rgba(125, 125, 125, 0.5)',
      height: '1px',
    },
    // reset both pre and code first to override default
    'pre,code': {
      background: '',
    },
    pre: {
      background: 'rgba(0, 0, 0, 0.07)',
    },
  },
}),

and found some themes for that typography at this neat git repo: https://github.com/PrismJS/prism-themes

For light mode I chose Coldark Cold by Armand Philippot

and for dark mode Atom Dark by Joe Gibson

The final Product Looks like this:

Concluding Thoughts

UnoCSS has a lot of customization options to offer with regex based rules and macros to apply multiple classes at once so I'd like to use more of it in the future. I also am interested in the UnoCSS icons package to replace the Iconify Vue components that I'm using.