For example, I am passing multiple classNames/styles through multiple props to a child component like this:

<Modal wrapperClassName="w-[680px]" contentClassName="px-[22px]">
...other code
</Modal>

I already know how to configure vscode tailiwndcss extension to enable highlight/autocompletion, but when I start or build the app, the result css file does not contain w-[680px] or px-[22px].

The tailwind in the build system does not read code in wrapperClassName or contentClassName.

I don’t want to add a hidden element just to tell tailwind to include these styles like this anymore:

<Modal wrapperClassName="w-[680px]" contentClassName="px-[22px]">

{/* here, this line helps to ensure these classes/styles are compiled into the final css file */}
<div class="hidden w-[680px] px-[22px]"></div> 

...other code
</Modal>

I can’t find any way to achieve this in the config docs.
https://tailwindcss.com/docs/configuration

How to solve this problem?

Thanks in advance.