unocss

Utility-First CSS

UnoCSS allows you to use utility classes directly in your HTML to style elements. In this example, the text is centered and colored red using utility classes.

<div class="text-center text-red-500">Hello, UnoCSS!</div>

On-Demand Generation

UnoCSS generates the necessary CSS only for the classes you use, making it highly efficient. This example demonstrates how to create a styled button using utility classes.

import 'uno.css';

const button = document.createElement('button');
button.className = 'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded';
document.body.appendChild(button);

Customizable

UnoCSS is highly customizable. You can define your own theme and utility classes. This example shows how to configure a custom theme with specific colors.

import { defineConfig } from 'unocss';

export default defineConfig({
  theme: {
    colors: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
});