Getting Started

An opinionated UnoCSS preset featuring advanced animations, fluid typography, Magic CSS integration, custom scrollbars, and seamless Akar design system support.

Installation

pnpm add -D @vinicunca/unocss-preset

npm install -D @vinicunca/unocss-preset

bun add -d @vinicunca/unocss-preset

Usage

Quick Start

In your UnoCSS config, add this preset to the presets option:

import { presetVinicunca } from '@vinicunca/unocss-preset';
import { defineConfig } from 'unocss';

export default defineConfig({
  presets: [
    presetVinicunca(),
  ],
});

Features

By default this preset already includes the following:

Preflights

We utilize UnoCSS preflights to apply a CSS reset, ensuring consistent styling across all browsers.

reset.css

/*
  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
  2. Remove default margins and padding
  3. Reset all borders
*/

*,
::after,
::before,
::backdrop,
::file-selector-button {
  box-sizing: border-box; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 2 */
  border-width: 0; /* 3 */
  border-style: solid; /* 3 */
}

/*
  1. Use a consistent sensible line-height in all browsers.
  2. Prevent adjustments of font size after orientation changes in iOS.
  3. Use a more readable tab size.
  4. Use the user's configured \`sans\` font-family by default.
  5. Use the user's configured \`sans\` font-feature-settings by default.
  6. Use the user's configured \`sans\` font-variation-settings by default.
  7. Disable tap highlights on iOS.
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  tab-size: 4; /* 3 */
  font-family: var(
    --defaults-font-family,
    ui-sans-serif,
    system-ui,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji'
  ); /* 4 */
  font-feature-settings: var(--defaults-font-feature-settings, normal); /* 5 */
  font-variation-settings: var(
    --defaults-font-variation-settings,
    normal
  ); /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
  Inherit line-height from \`html\` so users can set them as a class directly on the \`html\` element.
*/

body {
  line-height: inherit;
}

/*
  1. Add the correct height in Firefox.
  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
  3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
  Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

/*
  Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
  Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

/*
  Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
  1. Use the user's configured \`mono\` font-family by default.
  2. Use the user's configured \`mono\` font-feature-settings by default.
  3. Use the user's configured \`mono\` font-variation-settings by default.
  4. Correct the odd \`em\` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: var(
    --defaults-mono-font-family,
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    'Liberation Mono',
    'Courier New',
    monospace
  ); /* 1 */
  font-feature-settings: var(
    --defaults-mono-font-feature-settings,
    normal
  ); /* 2 */
  font-variation-settings: var(
    --defaults-mono-font-variation-settings,
    normal
  ); /* 3 */
  font-size: 1em; /* 4 */
}

/*
  Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
  Prevent \`sub\` and \`sup\` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
  3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
  Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
  Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
  Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
  Make lists unstyled by default.
*/

ol,
ul,
menu {
  list-style: none;
}

/*
  1. Make replaced elements \`display: block\` by default. (https://github.com/mozdevs/cssremedy/issues/14)
  2. Add \`vertical-align: middle\` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
    This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/*
  1. Inherit font styles in all browsers.
  2. Remove border radius in all browsers.
  3. Remove background color in all browsers.
  4. Ensure consistent opacity for disabled states in all browsers.
*/

button,
input,
optgroup,
select,
textarea,
::file-selector-button {
  font: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  color: inherit; /* 1 */
  border-radius: 0; /* 2 */
  background-color: transparent; /* 3 */
  opacity: 1; /* 4 */
}

/*
  Restore default font weight.
*/

:where(select:is([multiple], [size])) optgroup {
  font-weight: bolder;
}

/*
  Restore indentation.
*/

:where(select:is([multiple], [size])) optgroup option {
  padding-inline-start: 20px;
}

/*
  Restore space after button.
*/

::file-selector-button {
  margin-inline-end: 4px;
}

/*
  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
*/

::placeholder {
  opacity: 1;
}

/*
  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
  crash when using \`color-mix(…)\` with \`currentcolor\`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
*/

@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
  (contain-intrinsic-size: 1px) /* Safari 17+ */ {
  ::placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
}

/*
  Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
  Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
  1. Ensure date/time inputs have the same height when empty in iOS Safari.
  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
*/

::-webkit-date-and-time-value {
  min-height: 1lh; /* 1 */
  text-align: inherit; /* 2 */
}

/*
  Prevent height from changing on date/time inputs in macOS Safari when the input is set to \`display: block\`.
*/

::-webkit-datetime-edit {
  display: inline-flex;
}

/*
  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
*/

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
  padding-block: 0;
}

/*
  Remove the additional \`:invalid\` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
  Correct the inability to style the border radius in iOS Safari.
*/

button,
input:where([type='button'], [type='reset'], [type='submit']),
::file-selector-button {
  appearance: button;
}

/*
  Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
  Make elements with the HTML hidden attribute stay hidden by default.
*/

[hidden]:where(:not([hidden='until-found'])) {
  display: none !important;
}

/*
  1. Correct the odd appearance in Chrome and Safari.
  2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
  Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
  1. Correct the inability to style clickable types in iOS and Safari.
  2. Change font properties to \`inherit\` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role='button'] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

You can disable this with:

import { presetVinicunca } from '@vinicunca/unocss-preset';
import { defineConfig } from 'unocss';

export default defineConfig({
  presets: [
    presetVinicunca({
      preflights: false,
    }),
  ],
});

Transformers

Provides a unified interface to transform source code in order to support conventions. Within this preset we included two official transformer from UnoCSS that is enabled by default.

Transformer	Description
transformerDirectives	UnoCSS transformer for @apply, @screen and theme() directives.
transformerVariantGroup	Enables the variant group feature for UnoCSS.

This is the list of available presets included in presetVinicunca. Not all of them are enabled by default so you need to enable them manually if you want to use them. Please refer to the Options section for more information.

Preset	Description	Enabled by default
presetWind4	The Tailwind4 CSS compact preset for UnoCSS.	✅
presetWind3	The Tailwind3 CSS compact preset for UnoCSS.	❌
presetIcons	Use any icon with Pure CSS for UnoCSS.	✅
presetTypography	Provides a set of prose classes you can use to add typographic defaults to vanilla HTML.	❌
presetWebFonts	Use web fonts from Google Fonts, FontShare by simply providing the font names.	❌
presetAnimation	An animation preset inspired by tailwind-animate.	✅
presetFluid	Offers an elegant solution to scale typography and spacing fluidly across different screen sizes without the need for breakpoints.	✅
presetScrollbar	A customizable scrollbar preset for UnoCSS.	❌
presetAkar	Seamless integration with the Akar design system.	❌
presetMagicss	Integrate magic animation into unocss preset.	❌

Options

You can pass options to the presetVinicunca. You can customize which presets and transformers to enable, as well as their respective configurations. In this snippet below is only the root level of the options. To explore the detailed options for each preset and transformer, please refer to their respective documentation that are linked at the bottom.

The options accepts these properties:

interface PresetVinicuncaOptions {
  /**
   * Enable preflights
   *
   * @default true
   */
  preflights?: boolean;

  /**
   * Improve theme to be more useful, and align with Tailwind theme configuration
   *
   * - Add `animation` to theme, Expand theme animation name usage
   *
   * [ name, duration, timing-function, iteration-count ]
   *
   * @example
   *
   * ```ts
   * extendedTheme: {
   *   animation: {
   *    shape: 'shape 5s linear infinite'
   *   },
   *   // ...
   * }
   * ```
   *
   */
  extendedTheme?: VinicuncaExtends;

  /**
   * Enable the default preset for preset-wind3
   * Only works when `presets` is not specified and `wind4` is false
   *
   * @about [@unocss/preset-wind3](https://unocss.dev/presets/wind3)
   * @default false
   */
  wind3?: boolean | PresetWind3Options;

  /**
   * Enable the wind4 preset
   * Only works when `presets` is not specified and `wind3` is false
   *
   * @about [@unocss/preset-wind4](https://unocss.dev/presets/wind4)
   * @default {
   *  preflights: {
   *    reset: false,
   *  }
   * }
   */
  wind4?: boolean | PresetWind4Options;

  /**
   * Enable icons preset and the options of it
   * Only works when `presets` is not specified
   *
   * @about [@unocss/preset-icons](https://unocss.dev/presets/icons)
   * @default false
   */
  icons?: boolean | IconsOptions;

  /**
   * Enable webFonts preset and the options of it
   * Only works when `presets` is not specified
   *
   * **Note:** Default by [`fontsource`](https://fontsource.org/) provider
   *
   * @about [@unocss/preset-web-fonts](https://unocss.dev/presets/web-fonts)
   * @default false
   */
  webFonts?: boolean | WebFontsOptions;

  /**
   * Enable typography preset and the options of it
   * Only works when `presets` is not specified
   *
   * @about [@unocss/preset-typography](https://unocss.dev/presets/typography)
   * @default false
   */
  typography?: boolean | TypographyOptions;

  /**
   * Enable scrollbar preset and the options of it
   * Only works when `presets` is not specified
   *
   * @about [unocss-preset-scrollbar](/unocss-preset/scrollbar/usage)
   * @default false
   */
  scrollbar?: boolean | UnoPresetScrollbarOption;

  /**
   * Enable magicss preset
   *
   * @about [Magic Animate](https://github.com/miniMAC/magic)
   * @default false
   */
  magicCss?: boolean;

  /**
   * Enable animation preset
   *
   * @about inspired by [tailwin-animate](https://github.com/jamiebuilds/tailwindcss-animate)
   * @default true
   */
  animation?: boolean | AnimationOptions;

  /**
   * Enable fluid preset
   *
   * @default true
   */
  fluid?: boolean | DeepPartial<FluidOptions>;

  /**
   * Enable akar preset
   */
  akar?: boolean | VinicuncaAkarOptions;

  /**
   * Enable directives transformer and the options of it
   *
   * @about [@unocss/transformer-directives](https://unocss.dev/transformers/directives)
   * @default true
   */
  directives?: boolean | TransformerDirectivesOptions;

  /**
   * Enables the variant group feature of Windi CSS for UnoCSS.
   *
   * @about [@unocss/transformer-variant-group](https://unocss.dev/transformers/variant-group)
   * @default true
   */
  variantGroup?: boolean | TransformerVariantGroupOptions;
}

Please refer to these pages for more information regarding the options:

Name	Link
Animations	AnimationOptions and VinicuncaExtends
Fluid	FluidOptions
Akar	VinicuncaAkarOptions
Scrollbar	UnoPresetScrollbarOption
MagicCSS	MagicssOptions
PresetWind3Options	https://unocss.dev/presets/wind3#options
PresetWind4Options	https://unocss.dev/presets/wind4#options
IconsOptions	https://unocss.dev/presets/icons#options
WebFontsOptions	https://unocss.dev/presets/web-fonts#options
TypographyOptions	https://unocss.dev/presets/typography#options

Theme

To make animation configuration more flexible and easier to use, we have extended the UnoCSS theme to support easier animation configuration similar to Tailwind CSS.

Theme

Custom theme configurations for the animations preset.