Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move opacity modifier support into plugin theme() function #14348

Merged
merged 5 commits into from
Sep 5, 2024

Conversation

philipp-spiess
Copy link
Contributor

This PR moves support for opacity modifies from the CSS theme() function into the plugin theme() implementation, this will allow plugins to use this, too:

let plugin = plugin(function ({ addUtilities, theme }) {
    addUtilities({
      '.percentage': {
        color: theme('colors.red.500 / 50%'),
      },
      '.fraction': {
        color: theme('colors.red.500 / 0.5'),
      },
      '.variable': {
        color: theme('colors.red.500 / var(--opacity)'),
      },
    })
  })
}

There's a small behavioral change for the CSS theme() function. Since tuples are resolved by default for the CSS theme() function only, these will no longer have opacity applied to their first values. This is probably fine given the reduced complexity as I don't expect the first values of tuples to be colors and the fix would mean we would have to parse the modifier in different places.

@philipp-spiess philipp-spiess force-pushed the fix/plugin-theme-fn-opacity-modifier branch from 5d84d73 to 73368bd Compare September 5, 2024 08:27
packages/tailwindcss/src/functions.ts Outdated Show resolved Hide resolved
@philipp-spiess philipp-spiess merged commit 8f8803d into next Sep 5, 2024
3 checks passed
@philipp-spiess philipp-spiess deleted the fix/plugin-theme-fn-opacity-modifier branch September 5, 2024 10:40
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