From de79455b0e166c61936a8022c2f3d20ede59d397 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Fri, 22 Mar 2024 15:38:06 -0400
Subject: [PATCH] Add variant for @starting-style (#13329)

* Add variant for @starting-style

Co-Authored-By: Han Yeong-woo <han@yeongwoo.dev>

* Update changelog

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Han Yeong-woo <han@yeongwoo.dev>
---
 CHANGELOG.md                                           |  1 +
 .../src/__snapshots__/intellisense.test.ts.snap        |  7 +++++++
 packages/tailwindcss/src/variants.test.ts              | 10 ++++++++++
 packages/tailwindcss/src/variants.ts                   |  2 ++
 4 files changed, 20 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8b1323b7f..6c3a50760 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Make `rotate-x/y/z-*` utilities composable ([#13319](https://github.com/tailwindlabs/tailwindcss/pull/13319))
 - `@tailwind/vite` applies the Vite CSS plugin to transform Tailwind-generated CSS (e.g. inlining images) ([#13218](https://github.com/tailwindlabs/tailwindcss/pull/13218))
+- Add `starting` variant for `@starting-style` ([#13329](https://github.com/tailwindlabs/tailwindcss/pull/13329))
 
 ### Fixed
 
diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
index 775a63db6..8978f5123 100644
--- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -2403,6 +2403,13 @@ exports[`getVariants 1`] = `
     "selectors": [Function],
     "values": [],
   },
+  {
+    "hasDash": true,
+    "isArbitrary": false,
+    "name": "starting",
+    "selectors": [Function],
+    "values": [],
+  },
   {
     "hasDash": true,
     "isArbitrary": false,
diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts
index 3df052b5a..00e94740f 100644
--- a/packages/tailwindcss/src/variants.test.ts
+++ b/packages/tailwindcss/src/variants.test.ts
@@ -801,6 +801,16 @@ test('dark', () => {
   `)
 })
 
+test('starting', () => {
+  expect(run(['starting:opacity-0'])).toMatchInlineSnapshot(`
+    "@starting-style {
+      .starting\\:opacity-0 {
+        opacity: 0;
+      }
+    }"
+  `)
+})
+
 test('print', () => {
   expect(run(['print:flex'])).toMatchInlineSnapshot(`
     "@media print {
diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts
index 38a6ba504..badc49702 100644
--- a/packages/tailwindcss/src/variants.ts
+++ b/packages/tailwindcss/src/variants.ts
@@ -695,6 +695,8 @@ export function createVariants(theme: Theme): Variants {
 
   staticVariant('dark', ['@media (prefers-color-scheme: dark)'], { compounds: false })
 
+  staticVariant('starting', ['@starting-style'], { compounds: false })
+
   staticVariant('print', ['@media print'], { compounds: false })
 
   staticVariant('forced-colors', ['@media (forced-colors: active)'], { compounds: false })