Dynamic styles using tailwind JIT compiler not working bit src tailwind environment

Question

I have couple of react components created in bit src sope with tailwind environment.(bit src , tailwind environment ).

Its working fine with following variations.

1. built in classes i.e. w-0 w-1 w-2 w-4 ...
2. Pre define values i.e. w-[24px] bg-[#123456] ...

Its Not working with dynamic values provided by variable in run time as following. Throwing error saying CssSyntaxError (1:0) D:\Auzmor\office_component_library\node_modules\@auzmorui\component-library.tailwind.environments.env-with-tailwind\dist\tailwind\<no source> Unknown word

const width = 24
<div classname={`w-[${width}px]`}

tailwind.config.js

module.exports = {
  mode: 'jit',
  content: ['component-library/components/**/*.{js,jsx,ts,tsx}'],
  theme: {}
}

Tailwind version "tailwindcss": "3.1.6"

Answer 1

a few days ago we finished the implementation of Tailwind with the new Bit environments (more info).

This Env supports Tailwind v3 by default and you won't have problems with the JIT engine as the Env loads the Tailwind CDN in development (bit start).

You can find the source for this new Env here https://new.bit.cloud/learnbit-react/tailwind/tailwind-env

---

Anyway, as far as I know the implementation you are trying to use is not correct. Tailwind doesn't support building class names dynamically https://tailwindcss.com/docs/content-configuration#dynamic-class-names

The correct one should be something like this:

const widths = {
  '24': 'w-[24px]',
  '32': 'w-[32px]',
  '48': 'w-[48px]',
  '64': 'w-[64px]',
  '96': 'w-[96px]',
};
    
<div className={`${widths['24']} bg-red-500`}>24px</div>