Skip to content

Conversation

RobinMalfait
Copy link
Member

This PR is a follow up of #18815 and #18816, but this time let's migrate the supports theme keys.

Let's imagine you have the following Tailwind CSS v3 configuration:

export default {
  content: ['./src/**/*.html'],
  theme: {
    extend: {
      supports: {
        // Automatically handled by bare values (using CSS variable as the value)
        foo: 'foo: var(--foo)', // parentheses are optional
        bar: '(bar: var(--bar))',

        // Not automatically handled because names differ
        baz: 'qux: var(--foo)',
   //   ^^^   ^^^       ← different names

        // Custom
        grid: 'display: grid',
      },
    },
  },
}

Then we would generate the following Tailwind CSS v4 CSS:

@custom-variant supports-baz {
  @supports (qux: var(--foo)) {
    @slot;
  }
}
@custom-variant supports-grid {
  @supports (display: grid) {
    @slot;
  }
}

Notice how we didn't generate a custom variant for data-foo or data-bar because those are automatically handled by bare values.

I also went with the longer form of @custom-variant, we could use the single selector approach, but that felt less clear to me.

@custom-variant supports-baz (@supports (qux: var(--foo)));
@custom-variant supports-grid (@supports (display: grid));

@RobinMalfait RobinMalfait requested a review from a team as a code owner August 28, 2025 11:22
Comment on lines -415 to -418
if (BLOCKED_THEME_KEYS.includes(key)) {
return false
}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👋 bye bye blocked theme keys

We still have aria, data and supports handling in: https://github.com/tailwindlabs/tailwindcss/blob/feat%2Fupgrade-supports-theme/packages/tailwindcss/src/compat/theme-variants.ts

This is still necessary in case the config file could not be migrated due to other issues. So didn't get rid of that part.

@RobinMalfait RobinMalfait force-pushed the feat/upgrade-data-theme branch from 17b2f0a to 0e1549a Compare August 28, 2025 14:11
@RobinMalfait RobinMalfait force-pushed the feat/upgrade-supports-theme branch from ef9163d to 577d0f4 Compare August 28, 2025 14:13
@RobinMalfait RobinMalfait force-pushed the feat/upgrade-data-theme branch from 0e1549a to a08cb3d Compare August 28, 2025 14:37
@RobinMalfait RobinMalfait force-pushed the feat/upgrade-supports-theme branch from 577d0f4 to 889aefd Compare August 28, 2025 14:39
@RobinMalfait RobinMalfait force-pushed the feat/upgrade-data-theme branch from a08cb3d to 894143b Compare August 28, 2025 14:41
Base automatically changed from feat/upgrade-data-theme to main August 28, 2025 14:45
@RobinMalfait RobinMalfait force-pushed the feat/upgrade-supports-theme branch from 889aefd to 7a3e1c3 Compare August 28, 2025 14:46
@RobinMalfait RobinMalfait enabled auto-merge (squash) August 28, 2025 14:46
@RobinMalfait RobinMalfait merged commit e578238 into main Aug 28, 2025
7 checks passed
@RobinMalfait RobinMalfait deleted the feat/upgrade-supports-theme branch August 28, 2025 14:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants