Utilities added in v3.0

We have added more utilities in 3.0, and all utilities have a good inline playground, try it out and have fun.

  1. Backface Visibility
  2. Isolation
  3. Mix Blend Mode
  4. Shadow Color
  5. Background Blend Mode
  6. Background Origin
  7. Box Decoration Break
  8. Caret Color
  9. Caret Opacity
  10. Image Rendering
  11. List Style Type
  12. Stroke DashArray
  13. Stroke DashOffset
  14. Stroke LineCap
  15. Stroke LineJoin
  16. Hyphens
  17. Tab Size
  18. Text Decoration Color
  19. Text Decoration Opacity
  20. Text Decoration Length
  21. Text Decoration Offset
  22. Text Indent
  23. Text Stroke Width
  24. Text Stroke Color
  25. Text Shadow
  26. Writing Mode
  27. Writing Orientation
  28. Table Empty Cells
  29. Table Caption Side
  30. Transform Style
  31. Rotate X
  32. Rotate Y
  33. Rotate Z
  34. Scale Z
  35. Translate Z
  36. Perspective
  37. Perspective Origin
  38. Filter
  39. Backdrop Filter

Backface Visibility

The backface utility sets whether the back face of an element is visible when turned towards the user.

visible
hidden
CSS

Isolation

Utilities for controlling whether an element should explicitly create a new stacking context. These utilities are especially helpful when used in conjunction with mix-blend-mode and z-index.

isolate
isolation-auto
CSS

Mix Blend Mode

Utilities for controlling how an element should blend with the background.

normal
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity
CSS

Box Shadow Color

transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
Customizing
// windi.config.js
export default {
  theme: {
    boxShadowColor: {
      gray: '#1c1c1e',
    },
  },
}

Background Blend Mode

Utilities for controlling how an element's background image should blend with its background color.

normal
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity
CSS

Background Origin

Utilities for controlling the background origin of an element's background image.

border
padding
content
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',
      },
    },
  },
}

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',
    },
  },
}

Stroke DashArray

The stroke-dash utility is a presentation utility defining the pattern of dashes and gaps used to paint the outline of the shape;

0
1
2
3
4
5
6
7
8
9
10
100
CSS

Stroke DashOffset

The stroke-offset utility is a presentation utility defining an offset on the rendering of the associated dash array.

0
1
2
3
4
5
6
7
8
9
10
50
60
70
80
90
100
CSS

Stroke LineCap

The stroke-cap utility is a presentation utility defining the shape to be used at the end of open subpaths when they are stroked.

auto
square
round
CSS

Stroke LineJoin

The stroke-join utility is a presentation utility defining the shape to be used at the corners of paths when they are stroked.

auto
bevel
round
CSS

Hyphens

The hyphens utilities specifies how words should be hyphenated when text wraps across multiple lines. It can prevent hyphenation entirely, hyphenate at manually-specified points within the text, or let the browser automatically insert hyphens where appropriate.

none
manual
auto
CSS

Tab Size

The tab-size utilities are used to customize the width of tab characters (U+0009).

default
0
2
4
8
7.5px
2rem
CSS
Customizing
// windi.config.js
export default {
  theme: {
    tabSize: {
      sm: '2',
      md: '4',
      lg: '8',
    },
  },
}

Text Decoration

Utilities for controlling the decoration of text.

Text Decoration Type

Utilities for controlling the type of text decoration.

underline
line-through
no-underline
CSS

Text Decoration Color

Utilities for controlling the color of text decoration.

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

Text Decoration Opacity

Utilities for controlling the opacity of an element's decoration 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: {
      textDecorationOpacity: {
        10: '0.1',
        20: '0.2',
        95: '0.95',
      },
    },
  },
}

Text Decoration Length

Utilities for controlling the length of text decoration.

auto
0
1
2
3
4
5
6
7
8
0.1rem
3px
0.3em
CSS
Customizing
// windi.config.js
export default {
  theme: {
    extend: {
      textDecorationLength: {
        sm: '1px',
        md: '2px',
        lg: '4px',
      },
    },
  },
}

Text Decoration Offset

Utilities for controlling the offset of text decoration.

auto
1
2
3
4
5
6
7
8
0.6rem
8.5px
0.5em
CSS
Customizing
// windi.config.js
export default {
  theme: {
    textDecorationOffset: {
      sm: '1px',
      md: '2px',
      lg: '4px',
    },
  },
}

Text Indent

Utilities for controlling the indentation of text.

default
xs
sm
md
lg
xl
2xl
3xl
1.8rem
2em
1/2
-xs
-1em
CSS
Customizing
// windi.config.js
export default {
  theme: {
    extend: {
      textIndent: {
        '4xl': '5rem',
        '5xl': '6rem',
      },
    },
  },
}

Text Stroke

Utilities for controlling the stroke of a text element.

Text Stroke Width

Utilities for controlling the width of text stroke.

default
none
sm
md
lg
0
1
2
3
4
5
6
7
8
0.1rem
3px
0.3em
CSS
Customizing
// windi.config.js
export default {
  theme: {
    extend: {
      textStrokeWidth: {
        'xl': '6',
        '2xl': '8',
      },
    },
  },
}

Text Stroke Color

Utilities for controlling the color of text stroke.

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

Text Shadow

Utilities for controlling the shadow of a text element.

default
sm
md
lg
xl
none
CSS
Customizing
// windi.config.js
export default {
  theme: {
    textShadow: {
      'DEFAULT': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', // If a DEFAULT shadow is provided, it will be used for the non-suffixed shadow utility.
      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
      '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
    },
  },
}

Writing Mode

The writing-mode utility sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress. When set for an entire document, it should be set on the root element (html element for HTML documents).

normal
vertical-right
vertical-left
CSS

Writing Orientation

The writing-orientation utility sets the orientation of the text characters in a line. It only affects text in vertical mode (when writing-mode is not horizontal-tb). It is useful for controlling the display of languages that use vertical script, and also for making vertical table headers.

mixed
upright
sideways
CSS

Table Caption Side

The caption utility puts the content of a table's <caption> on the specified side. The values are relative to the writing-mode of the table.

top
bottom
CSS

Table Empty Cells

The empty-cells utility sets whether borders and backgrounds appear around <table>cells that have no visible content. A good use case for empty-cells could be a situation where you may not know whether a table will or will not contain empty data points and you decide to hide them.

visible
hidden
CSS

Transform Type

Utilities for controlling transform behaviour.

default
gpu
none
CSS

Transform Style

The transform-style utility sets whether children of an element are positioned in the 3D space or are flattened in the plane of the element.

flat
3d
CSS

Rotate X

0
6
12
30
45
72.5
90
180
-180
-90
-72.5
-45
-12
-6
CSS

Rotate Y

0
6
12
30
45
72.5
90
180
-180
-90
-72.5
-45
-12
-6
CSS

Rotate Z

0
6
12
30
45
72.5
90
180
-180
-90
-72.5
-45
-12
-6
CSS

Scale Z

0
25
50
75
90
95
100
105
110
125
150
CSS
Customizing
// windi.config.js
export default {
  theme: {
    scale: {
      half: '.5',
      full: '1',
    },
  },
}

Translate Z

0
px
full
6
12
7.5
1/2
2/3
3/4
3/5
3.5rem
42px
6em
-px
-full
-6
-12
-7.5
-1/2
-2/3
-3/4
-3/5
-3.5rem
-42px
CSS
Customizing

You can customize the global spacing scale in the theme.spacing or theme.extend.spacing sections of your windi.config.js file:

// windi.config.js
export default {
  theme: {
    extend: {
      spacing: {
        72: '18rem',
        84: '21rem',
        96: '24rem',
      },
    },
  },
}

To customize the translate scale separately, use the theme.translate section of your windi.config.js file.

// windi.config.js
export default {
  theme: {
    extend: {
      translate: {
        '1/7': '14.2857143%',
        '2/7': '28.5714286%',
        '3/7': '42.8571429%',
        '4/7': '57.1428571%',
        '5/7': '71.4285714%',
        '6/7': '85.7142857%',
      },
    },
  },
}

Perspective

The perspect utility determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective.

none
xs
sm
md
lg
xl
2xl
3xl
4xl
5xl
6xl
7xl
100
200
300
400
500
600
700
800px
23rem
CSS
Customizing
// windi.config.js
export default {
  theme: {
    extend: {
      perspective: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
    },
  },
}

Perspective Origin

The perspect-origin utility determines the position at which the viewer is looking. It is used as the vanishing point by the perspect utility.

center
top
top-right
right
bottom-right
bottom
bottom-left
left
top-left
[150%]
[-150%]
[150%_150%]
CSS
Customizing
// windi.config.js
export default {
  theme: {
    extend: {
      perspectiveOrigin: {
        tb150: '150% 150%',
        tb200: '200% 200%',
      },
    },
  },
}

Filter

Utilities for enabling and disabling filters on an element.

default
none
CSS

Filter Blur

default
sm
md
lg
xl
2xl
3xl
0
1
2
3
9
12
24px
2rem
CSS
Customizing
// windi.config.js
export default {
  theme: {
    blur: {
      '4xl': '72px',
      '5xl': '96px',
      '6xl': '128px',
    },
  },
}

Filter Brightness

0
50
75
90
95
100
105
110
115
125
150
175
200
251
CSS
Customizing
// windi.config.js
export default {
  theme: {
    brightness: {
      sm: '50',
      md: '100',
      lg: '150',
    },
  },
}

Filter Contrast

0
50
75
90
95
100
105
110
115
125
150
175
200
251
CSS
Customizing
// windi.config.js
export default {
  theme: {
    contrast: {
      sm: '50',
      md: '100',
      lg: '150',
    },
  },
}

Filter Drop Shadow

default
sm
md
lg
xl
2xl
none
CSS
Customizing
// windi.config.js
export default {
  theme: {
    dropShadow: {
      '3xl': 'drop-shadow(0 30px 30px rgba(0, 0, 0, 0.2))',
      '4xl': 'drop-shadow(0 40px 40px rgba(0, 0, 0, 0.3))',
    },
  },
}

Filter Grayscale

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

Filter Hue Rotate

0
15
30
45
60
90
120
180
-120
-90
-60
-45
-30
-15
CSS
Customizing
// windi.config.js
export default {
  theme: {
    hueRotate: {
      sm: '60',
      lg: '90',
      xl: '180',
    },
  },
}

Filter Invert

default
0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
Customizing
// windi.config.js
export default {
  theme: {
    invert: {
      sm: '0.5',
      lg: '0.8',
    },
  },
}

Filter Saturate

default
0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
Customizing
// windi.config.js
export default {
  theme: {
    saturate: {
      sm: '0.5',
      md: '1',
      lg: '1.5',
    },
  },
}

Filter Sepia

default
0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
Customizing
// windi.config.js
export default {
  theme: {
    sepia: {
      sm: '0.5',
      md: '0.8',
    },
  },
}

Backdrop Filter

Utilities for enabling and disabling backdrop filters on an element.

default
none
CSS

Backdrop Blur

default
sm
md
lg
xl
2xl
3xl
0
1
2
3
9
12
24px
2rem
CSS
Customizing
// windi.config.js
export default {
  theme: {
    backdropBlur: {
      '4xl': '72px',
      '5xl': '96px',
      '6xl': '128px',
    },
  },
}

Backdrop Brightness

0
50
75
90
95
100
105
110
115
125
150
175
200
251
CSS
Customizing
// windi.config.js
export default {
  theme: {
    backdropBrightness: {
      sm: '50',
      md: '100',
      lg: '150',
    },
  },
}

Backdrop Contrast

0
50
75
90
95
100
105
110
115
125
150
175
200
251
CSS
Customizing
// windi.config.js
export default {
  theme: {
    backdropContrast: {
      sm: '50',
      md: '100',
      lg: '150',
    },
  },
}

Backdrop Grayscale

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

Backdrop Hue Rotate

0
15
30
45
60
90
120
180
-120
-90
-60
-45
-30
-15
CSS
Customizing
// windi.config.js
export default {
  theme: {
    backdropHueRotate: {
      sm: '60',
      lg: '90',
      xl: '180',
    },
  },
}

Backdrop Invert

default
0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
Customizing
// windi.config.js
export default {
  theme: {
    backdropInvert: {
      sm: '0.5',
      lg: '0.8',
    },
  },
}

Backdrop Opacity

0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
Customizing
// windi.config.js
export default {
  theme: {
    backdropOpacity: {
      sm: '0.5',
      lg: '0.8',
    },
  },
}

Backdrop Saturate

default
0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
Customizing
// windi.config.js
export default {
  theme: {
    backdropSaturate: {
      sm: '0.5',
      md: '1',
      lg: '1.5',
    },
  },
}

Backdrop Sepia

default
0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
Customizing
// windi.config.js
export default {
  theme: {
    backdropSepia: {
      sm: '0.5',
      md: '0.8',
    },
  },
}