How do we add general sibling selector?

[jenstornell]

I like to use drawers like https://jsfiddle.net/fog2nt86/ that don't rely on any javascript at all.

What would be the best way to do this in Tailwind. I understand that it's not built in as it's a complex feature.

The code for my old drawer can be seen here: https://github.com/jenstornell/drawer.css/blob/master/assets/css/dist/drawer.css

The main thing of it is the general sibling selector to be used with the checkbox trick.

#drawer-left:checked ~ * .drawer-left {
transform: translateX(0);
}

Should I create a component, a utility, a theme, a variant or a plugin? Give me a hint, maybe a link to something helpful or a video.

[adamwathan]

I would probably write it as just some custom CSS in the components "bucket", so generally like this:

@tailwind base;
@tailwind components;

#drawer-left:checked ~ * .drawer-left {
transform: translateX(0);
}

@tailwind utilities;

If you wanted to generalize it to a variant you could author a custom variant that let you do things like:

<div>
  <input type="checkbox" checked>
  <span class="sibling-unchecked:translate-x-4 sibling-checked:translate-x-0">...</span>
</div>

You can learn more about creating your own variants here:

https://tailwindcss.com/docs/plugins#complex-variants

Writing complex variants like this requires prior knowledge of PostCSS so you might want to read up on their API documentation as well.