content-visibility-auto skips offscreen rendering; contain-* isolates layout/paint. This family contains 18 generated classes in Nakshora 3.0.
Classes#
| Class | Generated CSS |
|---|---|
contain-none | contain: none; |
contain-content | contain: content; |
contain-strict | contain: strict; |
contain-size | --tw-contain-size: size; contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style); |
contain-inline-size | --tw-contain-size: inline-size; contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style); |
contain-layout | --tw-contain-layout: layout; contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style); |
contain-paint | --tw-contain-paint: paint; contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style); |
contain-style | --tw-contain-style: style; contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style); |
content-none | --tw-content: none; content: var(--tw-content); |
content-normal | align-content: normal; |
content-center | align-content: center; |
content-start | align-content: flex-start; |
content-end | align-content: flex-end; |
content-between | align-content: space-between; |
content-around | align-content: space-around; |
content-evenly | align-content: space-evenly; |
content-baseline | align-content: baseline; |
content-stretch | align-content: stretch; |
Example#
example
<section class="content-auto contain-layout">Long page, fast paint</section>Responsive & variants#
Every class here accepts screen prefixes (sm: … xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.
Best practices#
- content-auto on below-the-fold sections = real FPS wins
Related#
utilities/interactivity/cursor|Cursor · utilities/interactivity/scroll-snap|Scroll snap