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.

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.

Mix Blend Mode #

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

Box Shadow Color #

export default {
  theme: {
    boxShadowColor: {
      gray: '#1c1c1e',
    },
  },
}

Background Blend Mode #

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

Background Origin #

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

Box Decoration Break #

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

Caret Color #

Utilities for controlling the color of insertion text.

export default {
  theme: {
    caretColor: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
}

Caret Opacity #

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

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.

List Style Type #

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

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;

Stroke DashOffset #

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

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.

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.

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.

Tab Size #

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

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.

Text Decoration Color #

Utilities for controlling the color of text decoration.

export default {
  theme: {
    textDecorationColor: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
}

Text Decoration Opacity #

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

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.

export default {
  theme: {
    extend: {
      textDecorationLength: {
        sm: '1px',
        md: '2px',
        lg: '4px',
      },
    },
  },
}

Text Decoration Offset #

Utilities for controlling the offset of text decoration.

export default {
  theme: {
    textDecorationOffset: {
      sm: '1px',
      md: '2px',
      lg: '4px',
    },
  },
}

Text Indent #

Utilities for controlling the indentation of text.

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.

export default {
  theme: {
    extend: {
      textStrokeWidth: {
        'xl': '6',
        '2xl': '8',
      },
    },
  },
}

Text Stroke Color #

Utilities for controlling the color of text stroke.

export default {
  theme: {
    textStrokeColor: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
}

Text Shadow #

Utilities for controlling the shadow of a text element.

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).

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.

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.

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.

Transform Type #

Utilities for controlling transform behaviour.

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.

Rotate X #

Rotate Y #

Rotate Z #

Scale Z #

export default {
  theme: {
    scale: {
      half: '.5',
      full: '1',
    },
  },
}

Translate Z #

export default {
  theme: {
    extend: {
      spacing: {
        72: '18rem',
        84: '21rem',
        96: '24rem',
      },
    },
  },
}

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.

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.

export default {
  theme: {
    extend: {
      perspectiveOrigin: {
        tb150: '150% 150%',
        tb200: '200% 200%',
      },
    },
  },
}

Filter #

Utilities for enabling and disabling filters on an element.

Filter Blur #

export default {
  theme: {
    blur: {
      '4xl': '72px',
      '5xl': '96px',
      '6xl': '128px',
    },
  },
}

Filter Brightness #

export default {
  theme: {
    brightness: {
      sm: '50',
      md: '100',
      lg: '150',
    },
  },
}

Filter Contrast #

export default {
  theme: {
    contrast: {
      sm: '50',
      md: '100',
      lg: '150',
    },
  },
}

Filter Drop Shadow #

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 #

export default {
  theme: {
    grayscale: {
      50: '0.5',
      80: '0.8',
    },
  },
}

Filter Hue Rotate #

export default {
  theme: {
    hueRotate: {
      sm: '60',
      lg: '90',
      xl: '180',
    },
  },
}

Filter Invert #

export default {
  theme: {
    invert: {
      sm: '0.5',
      lg: '0.8',
    },
  },
}

Filter Saturate #

export default {
  theme: {
    saturate: {
      sm: '0.5',
      md: '1',
      lg: '1.5',
    },
  },
}

Filter Sepia #

export default {
  theme: {
    sepia: {
      sm: '0.5',
      md: '0.8',
    },
  },
}

Backdrop Filter #

Utilities for enabling and disabling backdrop filters on an element.

Backdrop Blur #

export default {
  theme: {
    backdropBlur: {
      '4xl': '72px',
      '5xl': '96px',
      '6xl': '128px',
    },
  },
}

Backdrop Brightness #

export default {
  theme: {
    backdropBrightness: {
      sm: '50',
      md: '100',
      lg: '150',
    },
  },
}

Backdrop Contrast #

export default {
  theme: {
    backdropContrast: {
      sm: '50',
      md: '100',
      lg: '150',
    },
  },
}

Backdrop Grayscale #

export default {
  theme: {
    backdropGrayscale: {
      50: '0.5',
      80: '0.8',
    },
  },
}

Backdrop Hue Rotate #

export default {
  theme: {
    backdropHueRotate: {
      sm: '60',
      lg: '90',
      xl: '180',
    },
  },
}

Backdrop Invert #

export default {
  theme: {
    backdropInvert: {
      sm: '0.5',
      lg: '0.8',
    },
  },
}

Backdrop Opacity #

export default {
  theme: {
    backdropOpacity: {
      sm: '0.5',
      lg: '0.8',
    },
  },
}

Backdrop Saturate #

export default {
  theme: {
    backdropSaturate: {
      sm: '0.5',
      md: '1',
      lg: '1.5',
    },
  },
}

Backdrop Sepia #

export default {
  theme: {
    backdropSepia: {
      sm: '0.5',
      md: '0.8',
    },
  },
}