JIT analysis the comments code to add that classes instead of omit it

[RodrigoTomeES]

What version of Tailwind CSS are you using?

For example: v3.0.17

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

For example: postcss 8.4.5, Next.js 12.1.0

What version of Node.js are you using?

For example: v17.3.1

What browser are you using?

For example: N/A

What operating system are you using?

macOS

Describe your issue

Storybook can't start because JIT parses code from comments

[thecrypticace]

Hey, this is covered in the docs: https://tailwindcss.com/docs/content-configuration#dynamic-class-names. Tailwind CSS does not interpret your source code so dynamic class names like this won't work. Ideally, we would just not generate the CSS here since it's generating values that appear to result in a syntax error. Will see what we can do about this.

[thecrypticace]

I've merged a fix for this. We're currently waiting for some things before we tag an official release so in the mean time you can use the insiders build: npm install tailwindcss@insiders

[RodrigoTomeES]

@thecrypticace Hi, first of all thanks for your reply. I know that the code w-[${literal.string}] is incorrect but I commented it so I expected that Tailwind doesn't try to parse commented code. The pull request that you opened maybe fix the compilation error but that is not a fix for this issue because Tailwind will still parse commented code.

[thecrypticace]

Tailwind CSS does not evaluate or parse source code and as such does not know what is commented and what is not. Tailwind is intentionally set up to, as best it can, find matching classes from any text file (js, php, markdown, plain text, html, etc…). The fact that Tailwind pulls candidates from commented code is therefore not a bug but expected behavior. Hopefully that explains it well enough. 👍