2023-10-24

Using custom animations in UnoCSS
You can quite easily add custom animations in UnoCSS. In uno.config.js add this:
theme: {
    animation: {
      keyframes: {
        "in-out-custom":
          "{from,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}0%{opacity:0;transform:translate3d(0,-1500px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{transform:translate3d(0,0,0)}}",
      },
      durations: {
        "in-out-custom": "1s",
      },
      timingFns: {
        "in-out-custom": "ease-in-out",
      },
      counts: {
        "in-out-custom": "infinite",
      },
    },

  },
After that you can use it with animate-in-out-custom. After tweaking the animation and you’re happy with it you can set the counts value to 1 if it should only animate once.
It is also possible to use arbitrary values for the animation if you do something like this: class: "animate-[in-out-custom_2s_ease-in-out_infinite] keyframes-in-out-custom"
Go back to all posts

2023-10-16

Using UnoCSS with Tailwind extension
I really like UnoCSS but prefer the Tailwind extension because I find it has better intellisense and a bit better performance. Here’s how to use the Tailwind extension together with UnoCSS:
  1. Install the Tailwind extension in VSCode.
  2. Install the Tailwind package as a dev dependency. npm i --save-dev tailwindcss note that we’re not really using it, this is just for the extension to start.
  3. Add a tailwind.config.js (or .ts) file:
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,svelte}"],
};
That’s it!
Go back to all posts