Arbitrary value class not compiled when passed to Gatsby component through a prop

[rbottomley]

What version of @tailwindcss/jit are you using?

v0.1.17

What version of Node.js are you using?

v15.12.0

What build tool (or framework if it abstracts the build tool) are you using?

gatsby-cli v3.1.0

What browser are you using?

Firefox, Chrome

What operating system are you using?

Fedora Linux 33

Reproduction repository

https://github.com/rbottomley/jit-issue

An arbitrary value class does not get compiled by Tailwind JIT when the class contains values that are passed into a Gatsby component via props.

Example, index.js contains:
<Widget w="420px"/>

and widget.js component contains:

import React from 'react'

export const Widget = (props) => (
  <div className={`bg-[#0b0] w-[${props.w}] my-6 p-6`}>
      Tailwind JIT example inside of component. {props.w} wide
  </div>
)

The HTML output is correct:
<div class="bg-[#0b0] w-[420px] my-6 p-6">Tailwind JIT example inside of component. 420px wide</div>

The arbitrary value class bg-[#0b0] works but w-[420px] does not.

[alanonthegit]

Having this issue as well @adamwathan

[ICE-Cold-Ethanol]

I think this has been answered before,
see #138 (comment)

[rbottomley]

Oh, it sure has. Thanks for the info. Closing this.