Improve debugging tw prop styling

When tw prop is used, on the output we get for example class="App___StyledDiv-sc-1r3ydil-0 ksfoHe". In a bigger tree, it’s impossible to identify elements like that. I am aware that’s a tradeoff of not naming components.

export default function App() {
  return (
    <div tw="max-w-md mx-auto flex p-6 bg-gray-100 mt-10 rounded-lg shadow-xl" />
  )
}

Unfortunately, React Devtools is not helping here either.

It would be really useful if we could see TW styles along with the resulting CSS styles.

What comes into my mind is in DEV mode to basically include data-tw="..." prop with an original value that wouldn’t be transformed.

<div class="App___StyledDiv-sc-1r3ydil-0 ksfoHe" data-tw="max-w-md mx-auto flex p-6 bg-gray-100 mt-10 rounded-lg shadow-xl" />

I assume that React Devtools can’t be improved here, that would require something from SC/Emotion.

[ben-rogerson]

I’m aiming to add this feature - exactly as suggested - to the next version.

Here’s what you’ll add to the config to enable it:

twin: {
    debugProp: true,
},

Sound good?

[fvanwijk]

As I was replying on the email subscription directly I didn’t check this before replying, so thanks for the heads up. It is a nice feature for developers 👍