Getting Started

@vueland/utils-jit is a Vite plugin for generating CSS utilities in JIT mode.

Installation

pnpm

pnpm add -D @vueland/utils-jit

npm

npm install -D @vueland/utils-jit

yarn

yarn add -D @vueland/utils-jit

Plugin setup

Add utilsJIT() to your vite.config.ts.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { utilsJIT } from '@vueland/utils-jit'

export default defineConfig({
  plugins: [
    vue(),
    utilsJIT(),
  ],
})

By default, the plugin generates the following file:

src/.generated/utils-jit.css

Import it in your application entry file, for example in src/main.ts:

import './.generated/utils-jit.css'

Quick example

<template>
  <div class="w-[300px] h-[200px] px-[16px] radius-[12px] z-[10]">
    Hello Vueland
  </div>
</template>

The generated CSS will look roughly like this:

/* @vueland/utils-jit: generated utilities */
.h-\[200px\]{height: 200px !important;}
.px-\[16px\]{padding-left: 16px !important;padding-right: 16px !important;}
.radius-\[12px\]{border-radius: 12px !important;}
.w-\[300px\]{width: 300px !important;}
.z-\[10\]{z-index: 10 !important;}

Generated rules are sorted by utility token name, so you should not rely on the order of classes in the template.