windicss-content-visibility

Windi CSS Plugin Content Visibility

This plugin adds support for using the content-visibility and contain-intrinsic-size CSS properties in your Windi CSS project.

By default supports responsive variants.

Installation

Using NPM:

npm i -D windicss-content-visibility

Using PNPM:

pnpm add -D windicss-content-visibility

Add the plugin to your windi config file.

plugins: [
  require('windicss-content-visibility')
]

Usage

Available utilities:

Class	CSS Property
content-auto	content-visibility: auto
content-visible	content-visibility: visible
content-hidden	content-visibility: hidden
content-inherit	content-visibility: inherit
content-initial	content-visibility: initial
content-revert	content-visibility: revert
content-revert-layer	content-visibility: revert-layer
content-unset	content-visibility: unset
intrinsic-size-${integer}	contain-intrinsic-size: ${integer}px

Examples:

Basic:

<section class="content-auto intrinsic-size-200">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</section>

With responsive variants:

<section class="sm:content-hidden md:content-visible md:intrinsic-size-320">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</section>

License

This project use the MIT License. Please see License File for more information.