Windicss-content-visibility NPM

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.

windicss windi-css windicss-plugin windi css plugin content-visibility

@infinitebrahmanuniverse/nolb-wind @everything-registry/sub-chunk-3148

2 years ago

2 years ago

2 years ago

2 years ago