CODEWITHSUNDEEP
csstailwind-cssstyled-components
rkuang25
rkuang25

Reputation: 121

What's the Tailwind equivalent of the styled component tilde (~)?

How do I write the Tailwind equivalent of this styled component?

// Item is a div
const Clone = styled(Item)`
  ~ div {
    transform: none !important;
  }
`;

This comes from codesandbox. When dragging from the right column, it prevents it from looking like an extra element is inserted (Clone) once dragging begings.

Upvotes: 0

Views: 41

Answers (1)

Wongjn
Wongjn

Reputation: 23458

The tilde is CSS grammar not styled components specific. Thus, you could use it in a Tailwind arbitrary variant like [&~div]:!transform-none. One could also circumvent the need for it entirely like and apply !transform-none only when strictly needed like:

<div className={snapshot.isDragging ? '!transform-none' : ''}

Upvotes: 2

Related Questions