Echosight  Echosight
Twitter/X Header Photo
shadcn Profile image

@shadcn
building → @vercel - @v0 - ui.shadcn.com
Posts

36

22 increase

Impressions

581.8K

1151.1% increase

Likes

9.1K

2321.8% increase

Followers

1.3K

1.0% increase

Impressions

Followers

Engagement

Top Posts

Post Actions
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. https://t.co/cYndYHGy7p
Work in Progress. https://t.co/WGA1ErWwh8
2/10 - Toggle a data attribute using state. Use data-[] className. Change the width based on data-collapsed. https://t.co/I8aOFbtLL0
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. https://t.co/WDbIAzjlWE
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. https://t.co/TcxCIjyjTx
4/10 - This does the same thing as above but now we set the style based on a parent data attribute. https://t.co/TsrJkCbgNX
More soon.
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. https://t.co/tctKIa5heM
6/10 - Style a child using the data-slot technique on hover. Use a named slot and style it on hover. https://t.co/Sj4f8Uk64q
7/10 - Set a style based on the state of a peer. Here when the button is active, we slide in the action. https://t.co/neOk8hzr1P