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

Add dynamic data-* variant #9559

Merged
merged 3 commits into from
Oct 15, 2022
Merged

Add dynamic data-* variant #9559

merged 3 commits into from
Oct 15, 2022

Conversation

adamwathan
Copy link
Member

@adamwathan adamwathan commented Oct 14, 2022

This PR adds support for a new data variant that you can use to conditionally apply styles when a particular data attribute condition matches.

It's a parameterized variant, so it accepts an arbitrary value to create data attribute selectors dynamically in your markup:

<!-- Will apply -->
<div data-size="large" class="data-[size=large]:p-8">
  <!-- ... -->
</div>

<!-- Will not apply -->
<div data-size="medium" class="data-[size=large]:p-8">
  <!-- ... -->
</div>

<!-- Generated CSS -->
<style>
  .data-\[size\=large\]\:p-8[data-size=large] {
    padding: 2rem;
  }
</style>

You can also configure shortcuts for common data attribute selectors you're using in your project under the data key in the theme section of your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    data: {
      checked: 'ui~="checked"',
    },
  },
  // ...
}
<div class="data-checked:underline">
  <!-- ... -->
</div>

These variants also work as group-* and peer-* variants like many other variants in the framework:

<div data-size="large" class="group">
  <div class="group-data-[size=large]:p-8">
    <!-- Will apply `p-8` -->
  </div>
</div>

<div data-size="medium" class="group">
  <div class="group-data-[size=large]:p-8">
    <!-- Will not apply `p-8` -->
  </div>
</div>

@adamwathan adamwathan marked this pull request as ready for review October 15, 2022 00:31
@adamwathan adamwathan merged commit 6cd1631 into master Oct 15, 2022
@adamwathan adamwathan deleted the data-variant branch October 15, 2022 12:41
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