Last updated on June 17, 2025

Divide Color

Usage

Please refer to the documentation on the Tailwind CSS website

CAUTION

Divide Color was temporary removed in v4. We are working to re-add it in the future.

Compatibility

ClassSupport
divide-{n}
๐ŸŒ Web only
divide-[n]
๐ŸŒ Web only
divide-inherit
๐ŸŒ Web only
divide-current
๐ŸŒ Web only
Legend

Class

-{n} Supports values from theme

-[n] Supports arbitrary values

Icon

โœ… Full support

โœ”๏ธ Partial support on native

๐Ÿงช Experimental support on native

๐Ÿ“ฑ Native only

๐ŸŒ Web only

divideOpacity (native only)

For performance reasons, Nativewind renders with the corePlugin divideOpacity disabled. This plugin allows the divide color to dynamically change its opacity via the --tw-divide-opacity variable. Instead, the opacity is set as a static value in the color property.

If you need to use this feature, you can enable it by adding the following to your tailwind.config.js file:

module.exports = {
  /* ...  */
  corePlugin: {
    divideOpacity: true,
  },
};

On this page