Question / Feature Request: Ability to target children

[silvestreh]

First off I'd like to thank everyone involved for this library!

I've recently found myself trying to style components that come from other libraries and, while I can use tw(ThirdPartyComponent), it adds Tailwind classes only to the "container" and can't use CSS selectors to target any children.

Would an API like this be possible?

const MyComponent = tw.div`
  py-8
  relative

  ${(props, selector) => selector('.child-element')`
    px-4
    absolute
  `}
`;

Where selector would try to find any child matching the CSS selector passed.

[silvestreh]

🤔 not sure this would be possible. In order to be able to query the DOM, we would first need to render the component.

[MathiasGilson]

Unfortunately this is not possible as tw return one css class and css does not support that natively.
You can extend a styled component class that support nested classes

[silvestreh]

@MathiasGilson thanks for taking the time to reply.

Yes, I'm aware that I could extend a styled-component, but the problem I was having was trying to style a component from a third party library, like Ant Design's Date Picker. Besides, when extending a styled-component you can only write CSS and can't use Tailwind classes for nested children.

Shortly after opening this issue I realized my idea above was rather silly because being able to map my selector function above with, say, twComponentRef.querySelector would've required the component to be rendered. And even then, a component like a Date Picker would only render certain pieces after the user had interacted with it (opening a calendar after clicking.)

I ended up taking what I believe was the most reasonable approach: write those style overrides in a CSS file and import it.

Anyway, thanks again for the hard work 😄

[MathiasGilson]

Yeah that's what I do with ant.design too!
You can also override css props from the build config in your packager (webpack in my case)