I wanted to share the following 10 Tailwind techniques. These will come in handy next week. For those who don’t use Tailwind, here be dragons! 1/10 - Let’s start simple. Set a CSS variable (width) based on state and use an arbitrary className.
2/10 - Toggle a data attribute using state. Use data-[] className. Change the width based on data-collapsed.
3/10 - Change the style of a (nested) child based on state as data attribute. (This is one method. More below) - Rotate an icon on collapsed.
4/10 - This does the same thing as above but now we set the style based on a parent data attribute.
5/10 - Now using group and group-data. Rotate an icon based on a group's state. Useful if you want to resize an icon when the width of its parent changes.
6/10 - Style a child using the data-slot technique on hover. Use a named slot and style it on hover.
7/10 - Set a style based on the state of a peer. Here when the button is active, we slide in the action.
8/10 - Set the style of a child based on focus within its parent or the group. We use a named group to not collide with the group on Sidebar.
9/10 - Set the style of a child based on the state of another child in the same group. When I click the action (green), make the button blue. Useful if you need to style a menu item when a dropdown button is clicked.
10/10 - Change the style of a component based on a prop of another component. Here we change the border and rotate the icon of the action if the button has a different variant.
More soon.