Behaviors

Animation

Utilities for animating elements with CSS animations.

none
spin
ping
pulse
bounce
CSS
Customizing
// windi.config.js
export default {
  theme: {
    extend: {
      animation: {
        'spin-slow': 'spin 3s linear infinite',
      },
    },
  },
}

To add new animation @keyframes, use the keyframes section of your theme configuration:

// windi.config.js
export default {
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        },
      },
    },
  },
}

Appearance

Utilities for suppressing native form control styling.

none
CSS

Box Decoration Break

Utilities for controlling how element fragments should be rendered across multiple lines, columns, or pages.

slice
clone
CSS

Caret Color

Utilities for controlling the color of insertion text.

transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
Customizing
// windi.config.js
export default {
  theme: {
    caretColor: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
}

Caret Opacity

Utilities for controlling the opacity of an element's caret color.

0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
Customizing
// windi.config.js
export default {
  theme: {
    extend: {
      caretOpacity: {
        light: '0.1',
      },
    },
  },
}

Cursor

Utilities for controlling the cursor style when hovering over an element.

auto
default
pointer
wait
text
move
help
not-allowed
CSS
Customizing
// windi.config.js
export default {
  theme: {
    cursor: {
      'auto': 'auto',
      'default': 'default',
      'pointer': 'pointer',
      'wait': 'wait',
      'text': 'text',
      'move': 'move',
      'not-allowed': 'not-allowed',
      'crosshair': 'crosshair',
      'zoom-in': 'zoom-in',
    },
  },
}

Image Rendering

The image-render utility defines how the browser should render an image if it is scaled up or down from its original dimensions. By default, each browser will attempt to apply aliasing to this scaled image in order to prevent distortion, but this can sometimes be a problem if we want the image to preserve its original pixelated form.

auto
pixel
edge
CSS

List Style Type

Utilities for controlling the bullet/number style of a list.

none
disc
circle
square
decimal
zero-decimal
greek
roman
upper-roman
alpha
upper-alpha
CSS
Customizing
// windi.config.js
export default {
  theme: {
    listStyleType: {
      none: 'none',
      disc: 'disc',
      decimal: 'decimal',
      square: 'square',
      roman: 'upper-roman',
    },
  },
}

List Style Position

Utilities for controlling the position of bullets/numbers in lists.

inside
outside
CSS

Outline

Utilities for controlling an element's outline.

none
white
black
gray-500
red-500
yellow-500
blue-500
green-500
CSS

Outline Solid

none
white
black
gray-500
red-500
yellow-500
blue-500
green-500
CSS

Outline Dotted

none
white
black
gray-500
red-500
yellow-500
blue-500
green-500
CSS
Customizing
// windi.config.js
export default {
  theme: {
    extend: {
      outline: {
        blue: '2px solid #0000ff',
      },
    },
  },
}

You can also provide an outline-offset value for any custom outline utilities using a tuple of the form [outline, outlineOffset]:

// windi.config.js
export default {
  theme: {
    extend: {
      outline: {
        blue: ['2px solid #0000ff', '1px'],
      },
    },
  },
}

Overflow

Utilities for controlling how an element handles content that is too large for the container.

auto
hidden
visible
scroll
x-auto
x-hidden
x-visible
x-scroll
y-auto
y-hidden
y-visible
y-scroll
CSS

Overscroll Behavior

Utilities for controlling how the browser behaves when reaching the boundary of a scrolling area.

  • Use auto to make it possible for the user to continue scrolling a parent scroll area when they reach the boundary of the primary scroll area.

  • Use none to prevent scrolling in the target area from triggering scrolling in the parent element, and also prevent "bounce" effects when scrolling past the end of the container.

  • Use contain to prevent scrolling in the target area from triggering scrolling in the parent element, but preserve "bounce" effects when scrolling past the end of the container in operating systems that support it.

auto
none
contain
x-auto
x-none
x-contain
y-auto
y-none
y-contain
CSS

Placeholder Color

Utilities for controlling the color of placeholder text.

transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
Customizing
// windi.config.js
export default {
  theme: {
    placeholderColor: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
}

Placeholder Opacity

Utilities for controlling the opacity of an element's placeholder color.

0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
Customizing
// windi.config.js
export default {
  theme: {
    extend: {
      placeholderOpacity: {
        light: '0.1',
      },
    },
  },
}

Pointer Events

Utilities for controlling whether an element responds to pointer events.

none
auto
CSS

Resize

Utilities for controlling how an element can be resized.

default
y
x
none
CSS

User Select

Utilities for controlling whether the user can select text in an element.

none
text
all
auto
CSS

Screen Readers Access

Utilities for improving accessibility with screen readers.

ClassProperties
sr-onlyposition: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
not-sr-onlyposition: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;

Usage

Use sr-only to hide an element visually without hiding it from screen readers:

<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only">Settings</span>
</a>

Use not-sr-only to undo sr-only, making an element visible to sighted users as well as screen readers. This can be useful when you want to visually hide something on small screens but show it on larger screens for example:

<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only sm:not-sr-only">Settings</span>
</a>

By default, responsive and focus variants are generated for these utilities. You can use focus:not-sr-only to make an element visually hidden by default but visible when the user tabs to it — useful for "skip to content" links:

<a href="#" class="sr-only focus:not-sr-only">
  Skip to content
</a>