tailwindcss-theme-variants icon indicating copy to clipboard operation
tailwindcss-theme-variants copied to clipboard

Increased specificity on selector/baseSelector

Open mbaird4 opened this issue 4 years ago • 0 comments
trafficstars

More of a question than an issue:

Is it possible to somehow make the selectors more flexible? By passing an array to selector, or so that the selectors don't attach to baseSelector? I've got a kind of complex set up where certain components always need the dark theme, while others always need the light theme (and then a page that the user can choose which theme they want), so the current functionality doesn't really work for me. I need something that could basically do the following:

dark theme applies to body[data-theme="dark"] light theme applies to body[data-theme="light"], body[data-theme="dark"] .some-light-component

button {
	@apply light:bg-red dark:bg-blue;
}
<body data-theme="dark">
    <div class="some-light-component">
        <!-- button is red -->
        <button></button>
    </div>
</body>

<body data-theme="light">
    <!-- button is red -->
    <button></button>
</body>
    
<body data-theme="dark">
    <!-- button is blue -->
    <button></button>
</body>

Thanks in advance, and thanks for the great work on this project.

mbaird4 avatar Aug 26 '21 19:08 mbaird4