Merge fd3c481d28 into fa81d697fe

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Add `@tailwindcss/turbopack` package to run Tailwind CSS with Next.js ([20367](https://github.com/tailwindlabs/tailwindcss/pull/20367))
+- Add `content-visibility` utilities (`content-visibility-auto`, `content-visibility-hidden`, `content-visibility-visible`) for rendering performance optimization ([#20520](https://github.com/tailwindlabs/tailwindcss/pull/20520))
 
 ### Fixed
 

packages/tailwindcss/src/property-order.ts

@@ -50,6 +50,7 @@ export default [
 
   'box-sizing',
   'display',
+  'content-visibility',
 
   'field-sizing',
   'aspect-ratio',

packages/tailwindcss/src/utilities.test.ts

@@ -92,6 +92,40 @@ test('visibility', async () => {
   ).toEqual('')
 })
 
+test('content-visibility', async () => {
+  expect(
+    await run([
+      'content-visibility-auto',
+      'content-visibility-hidden',
+      'content-visibility-visible',
+    ]),
+  ).toMatchInlineSnapshot(`
+    "
+    .content-visibility-auto {
+      content-visibility: auto;
+    }
+
+    .content-visibility-hidden {
+      content-visibility: hidden;
+    }
+
+    .content-visibility-visible {
+      content-visibility: visible;
+    }
+    "
+  `)
+  expect(
+    await run([
+      '-content-visibility-auto',
+      '-content-visibility-hidden',
+      '-content-visibility-visible',
+      'content-visibility-auto/foo',
+      'content-visibility-hidden/foo',
+      'content-visibility-visible/foo',
+    ]),
+  ).toEqual('')
+})
+
 test('position', async () => {
   expect(await run(['static', 'fixed', 'absolute', 'relative', 'sticky'])).toMatchInlineSnapshot(`
     "

packages/tailwindcss/src/utilities.ts

@@ -624,6 +624,13 @@ export function createUtilities(theme: Theme) {
   staticUtility('invisible', [['visibility', 'hidden']])
   staticUtility('collapse', [['visibility', 'collapse']])
 
+  /**
+   * @css `content-visibility`
+   */
+  staticUtility('content-visibility-auto', [['content-visibility', 'auto']])
+  staticUtility('content-visibility-hidden', [['content-visibility', 'hidden']])
+  staticUtility('content-visibility-visible', [['content-visibility', 'visible']])
+
   /**
    * @css `position`
    */