or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-unocss--preset-uno

Deprecated UnoCSS preset providing Tailwind CSS v3 compatibility via @unocss/preset-wind3 wrapper

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@unocss/preset-uno@66.5.x

To install, run

npx @tessl/cli install tessl/npm-unocss--preset-uno@66.5.0

index.mddocs/

@unocss/preset-uno

DEPRECATED: This package has been renamed to @unocss/preset-wind3. This package serves as a compatibility wrapper providing the same functionality under the original preset-uno name.

@unocss/preset-uno is a UnoCSS preset that provides Tailwind CSS v3 / Windi CSS compatibility through atomic CSS utilities. It offers a comprehensive set of utility classes for rapid styling and prototyping, now implemented as a thin wrapper around @unocss/preset-wind3.

Package Information

  • Package Name: @unocss/preset-uno
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @unocss/preset-uno
  • Status: Deprecated (renamed to @unocss/preset-wind3)

Core Imports

import { presetUno } from "@unocss/preset-uno";
import type { PresetUnoOptions, Theme } from "@unocss/preset-uno";

Default import:

import presetUno from "@unocss/preset-uno";

CommonJS:

const { presetUno } = require("@unocss/preset-uno");

Basic Usage

import { defineConfig } from "unocss";
import { presetUno } from "@unocss/preset-uno";

export default defineConfig({
  presets: [
    presetUno({
      important: false,
      // Other preset-wind3 options...
    }),
  ],
});

With configuration options:

import { defineConfig } from "unocss";
import { presetUno } from "@unocss/preset-uno";

export default defineConfig({
  presets: [
    presetUno({
      important: true, // Add !important to all utilities
      variablePrefix: "un-", // CSS variable prefix
      dark: "media", // Dark mode strategy
    }),
  ],
});

Capabilities

Preset Function

The main preset function that creates a UnoCSS preset configuration with Tailwind CSS v3 compatibility.

/**
 * @deprecated Use `presetWind3` from `@unocss/preset-wind3` instead
 */
export const presetUno: (options?: PresetUnoOptions) => Preset;

/**
 * Default export of presetUno function
 */
export default presetUno;

Theme System

Complete theme configuration re-exported from @unocss/preset-wind3, including extended animations, media queries, and styling configurations.

// Import theme object from theme sub-module
import { theme } from "@unocss/preset-uno/theme";

// Theme object includes:
interface ThemeExtensions {
  aria: Record<string, string>; // ARIA attribute mappings
  animation: {
    keyframes: Record<string, Record<string, string>>; // 100+ predefined keyframes
    durations: Record<string, string>;
    timingFns: Record<string, string>;
    properties: Record<string, string>;
    counts: Record<string, string>;
  };
  media: Record<string, string>; // Media query definitions
  supports: Record<string, string>; // CSS @supports queries
  preflightBase: Record<string, any>; // Base preflight styles
  // Plus all theme properties from @unocss/preset-mini
}

All theme exports from @unocss/preset-wind3/theme are available.

Color System

Complete Tailwind CSS color palette re-exported from @unocss/preset-wind3.

// Import colors object from colors sub-module
import { colors } from "@unocss/preset-uno/colors";

// Complete color palette with 50-950 shades for each color:
interface ColorsObject {
  // Basic colors
  inherit: string;
  current: string;
  transparent: string;
  black: string;
  white: string;
  
  // Color scales (50-950 shades each)
  rose: Record<string | number, string>;
  pink: Record<string | number, string>;
  fuchsia: Record<string | number, string>;
  purple: Record<string | number, string>;
  violet: Record<string | number, string>;
  indigo: Record<string | number, string>;
  blue: Record<string | number, string>;
  sky: Record<string | number, string>;
  cyan: Record<string | number, string>;
  teal: Record<string | number, string>;
  emerald: Record<string | number, string>;
  green: Record<string | number, string>;
  lime: Record<string | number, string>;
  yellow: Record<string | number, string>;
  amber: Record<string | number, string>;
  orange: Record<string | number, string>;
  red: Record<string | number, string>;
  gray: Record<string | number, string>;
  slate: Record<string | number, string>;
  zinc: Record<string | number, string>;
  neutral: Record<string | number, string>;
  stone: Record<string | number, string>;
  // Plus color aliases and shortcuts
}

All color exports from @unocss/preset-wind3/colors are available.

Utility Functions

Comprehensive utility functions re-exported from @unocss/preset-wind3 for color parsing, variant creation, and rule processing.

// Import utility functions from utils sub-module
import {
  // Color utilities
  hex2rgba,
  parseCssColor,
  colorToString,
  colorOpacityToString,
  
  // String utilities
  getBracket,
  getStringComponent,
  getStringComponents,
  
  // Handler utilities
  createValueHandler,
  
  // Variant utilities
  variantMatcher,
  variantParentMatcher,
  variantGetBracket,
  variantGetParameter,
  
  // Pseudo-class utilities
  createTaggedPseudoClassMatcher,
  createPseudoClassesAndElements,
  createPseudoClassFunctions,
  
  // Theme utilities
  hasThemeFn,
  transformThemeFn,
  transformThemeString,
  
  // Types
  type CSSColorValue,
  type RGBAColorValue,
  type ParsedColorValue,
  type ValueHandler,
  type PseudoVariantOptions
} from "@unocss/preset-uno/utils";

All utility exports from @unocss/preset-wind3/utils are available.

Types

interface PresetUnoOptions extends PresetWind3Options {}

interface PresetWind3Options extends PresetMiniOptions {
  /**
   * The important option lets you control whether UnoCSS's utilities should be marked with `!important`.
   * 
   * This can be really useful when using UnoCSS with existing CSS that has high specificity selectors.
   * 
   * You can also set `important` to a selector like `#app` instead, which will generate `#app :is(.m-1) { ... }`
   * 
   * @default false
   */
  important?: boolean | string;
}

interface DarkModeSelectors {
  /**
   * Selectors for light variant.
   * @default '.light'
   */
  light?: string | string[];
  
  /**
   * Selectors for dark variant.
   * @default '.dark'
   */
  dark?: string | string[];
}

interface PresetMiniOptions {
  /**
   * Dark mode options
   * @default 'class'
   */
  dark?: 'class' | 'media' | DarkModeSelectors;
  
  /**
   * Generate tagged pseudo selector as `[group=""]` instead of `.group`
   * @default false
   */
  attributifyPseudo?: boolean;
  
  /**
   * Prefix for CSS variables.
   * @default 'un-'
   */
  variablePrefix?: string;
  
  /**
   * Utils prefix. When using tagged pseudo selector, only the first truthy prefix will be used.
   * @default undefined
   */
  prefix?: string | string[];
  
  /**
   * Generate preflight
   * @default true
   */
  preflight?: boolean | 'on-demand';
  
  /**
   * Enable arbitrary variants, for example `<div class="[&>*]:m-1 [&[open]]:p-2"></div>`.
   * Disable this might slightly improve the performance.
   * @default true
   */
  arbitraryVariants?: boolean;
}

type Theme = import('@unocss/preset-wind3').Theme;
type Preset = import('@unocss/core').Preset;

Migration Guide

This package is deprecated. To migrate to the new package:

  1. Update package.json:

    npm uninstall @unocss/preset-uno
    npm install @unocss/preset-wind3
  2. Update imports:

    // Before
    import { presetUno } from "@unocss/preset-uno";
    
    // After
    import { presetWind3 as presetUno } from "@unocss/preset-wind3";
    // or
    import { presetWind3 } from "@unocss/preset-wind3";
  3. Update configuration:

    // Before
    export default defineConfig({
      presets: [presetUno()],
    });
    
    // After
    export default defineConfig({
      presets: [presetWind3()], // or presetUno if aliased
    });

The API and functionality remain identical between the packages.