Arbitrary Values Will Not Compile

[reedpatterson]

Hello. I've been using tailwindcss for a while, and have never had any problems with arbitrary values until starting this new project. My content string is picking up the files, as both built-in and extended classes are being compiled; the only exception is with regular, hardcoded, arbitrary values.

In the debugger, you can see the arbitrary valued class applied to the element with no style being rendered.

If i were to replace it with a random color, it complies in just fine.

I believe my tailwind configuration and set up is all correct. I'm having a hard time researching this issue, since the topic is diluted with questions trying to establish dynamic arbitrary classes, which I know isn't possible. I am using Angular 17 and tailwindcss 3.4.1

Thanks!

[wongjn]

Consider checking:

• Tailwind has compiled since you added the class.
• The content file globs sufficiently cover the file that the code appears in.

Otherwise, please consider providing a project that reproduces the unexpected behavior.

[tmaksimenko]

I had a similar issue to the original poster and haven't yet found an answer so I made a mockup.

I'm not sure what you mean by Tailwind not being installed or used - the red text is rendered using Tailwind "text-red-600" (note I am new to Tailwind so may be misunderstanding).

[wongjn]

When I say Tailwind is not being installed or used, I do not see any mention of tailwindcss in the package.json and could find any Tailwind classes (like text-red-600) being used. Furthermore, this is what I see running npm run start:

Which seems completely different to your screenshot.

[tmaksimenko]

that's embarrassing - I forgot to push the changes... sorry for the runaround! it should display as per screenshot now

[wongjn]

It seems some of the installation instructions for Angular have not been followed:

• PostCSS has not been installed. As per step 2, install it by running:

  npm install -D postcss

• The @tailwind directives have not been added. As per step 4, add them to src/styles.css:

   /* You can add global styles to this file, and also import other style files */
  +@tailwind base;
  +@tailwind components;
  +@tailwind utilities;

• Remove the @tailwind directives from src/app/app.component.css. Angular's CSS scoping seems to mangle Tailwind's CSS rule selectors for arbitrary variants too:

  .text-\__ph-0__[_ngcontent-ng-c896006178] {
    --tw-text-opacity: 1;
    color: rgb(0 128 0 / var(--tw-text-opacity));
  }

  Should be:

  text-\[\#008000\][_ngcontent-ng-c896006178] {
    --tw-text-opacity: 1;
    color: rgb(0 128 0 / var(--tw-text-opacity));
  }

Lastly, for the last element to be blue, either remove the space, [color:blue] or use an underscore to escape the space, [color:_blue].

[tmaksimenko]

this worked, thanks so much for your help!