Search code examples
csstailwind-cssstyled-components

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.

Solution

  • 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' : ''}