Deprecated UnoCSS preset providing Tailwind CSS v3 compatibility via @unocss/preset-wind3 wrapper
npx @tessl/cli install tessl/npm-unocss--preset-uno@66.5.0DEPRECATED: 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.
npm install @unocss/preset-unoimport { 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");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
}),
],
});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;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.
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.
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.
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;This package is deprecated. To migrate to the new package:
Update package.json:
npm uninstall @unocss/preset-uno
npm install @unocss/preset-wind3Update imports:
// Before
import { presetUno } from "@unocss/preset-uno";
// After
import { presetWind3 as presetUno } from "@unocss/preset-wind3";
// or
import { presetWind3 } from "@unocss/preset-wind3";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.