New Features in v3.4 #

This is a summary version that summarizes the improvements and added features from v3.4.0 to v3.4.2

Colors #

v3.4.0 added the following new colors:

• slate
• zinc
• neutral
• stone

Utilities #

Box Shadow Color Opacity #

The box shadow color opacity can now be set like this:

• shadow-red-500/50
• shadow-yellow-700/80
• ...

See here for details.

New aspect-ratio Classes #

Utilities for controlling the aspect ratio of an element, see here for details.

• aspect-auto
• aspect-square
• aspect-video

New flex-basis Classes #

Utilities for controlling the initial size of flex items, see here for details.

• basis-auto
• basis-full
• basis-1
• basis-12
• basis-1/2
• basis-11/12
• ...

New columns, break-after, break-before and break-inside Classes #

Utilities for controlling the number of columns within an element, see here for details.

• columns-1
• columns-12
• break-after-auto
• break-before-all
• break-inside-avoid
• ...

New touch-action and scroll-behavior Classes #

Touch Action #

Utilities for controlling how an element can be scrolled and zoomed on touchscreens, see here for details.

• touch-auto
• touch-none
• ...

Scroll Behavior #

Utilities for controlling the scroll behavior of an element, see here for details.

• scroll-auto
• scroll-smooth

New will-change Classes #

Utilities for optimizing upcoming animations of elements that are expected to change, see here for details.

• will-change-auto
• will-change-scroll
• will-change-contents
• will-change-transform

New accent-color Classes #

Utilities for controlling the accented color of a form control, see here for details.

• accent-red-500
• accent-yellow-800/50
• ...

Variants #

New portrait: and landscape: Variants #

These variants enable utilities when the device is in a specific orientation, see here for details.

New file: Variant #

Targets the file-selector-button pseudo-element, see here for details.

New marker: Variant #

Targets the marker pseudo-element. Can be used inheritable, see here for details.