18 Beta 2 - Not all tailwind classes are available

[cbjerg]

Describe the bug

Trying to understand how to move to primeng 18 beta 2 I have added tailwindcss and tailwindcss-primeui
in my app.component.ts, i have added

this.config.theme.set({
      preset: Aura,
      options: {
          prefix: 'p',
          darkModeSelector: '.dark',
          cssLayer: {
            name: 'primeng',
            order: 'tailwind-base, tailwind-utilities, primeng'
        }
          
      }
    });
    this.config.ripple.set(true);

In my styles.scss I have added

@layer tailwind-base, primeng, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
}

My tailwind.config.js

module.exports = {
  darkMode: 'selector',
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require('tailwindcss-primeui')],
}

I have run

prime pf2tw

To change my layout of templates to tailwind in stead of primeflex

Everything looks almost as it did before, with v 17, and primeflex I am missing a log of colors from tailwind, like bg-teal-500 - it is not there and just renders white. bg-purple-500 is there, as well as bg-yellow-500 I can see on https://tailwindcss.com/docs/background-color that teal should also be there. What am I missing? bg-teal-500 and bg-red-500 (also missing, and rendering nothing) is used quite heavily thoughout my application.

Environment

macOS 15
Node v18.20.4

Reproducer

No response

Angular version

18.2.6

PrimeNG version

18.0.0-beta.2

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v18.20.4

Browser(s)

Chrome

Steps to reproduce the behavior

Create an html element and give it bg-teal-500
Create another html element and give it bg-cyan-500

Only the second will render a color

Expected behavior

2 elements with teal and cyan colors

[jogerj]

Did you follow the angular specific instructions for installing tailwind? https://tailwindcss.com/docs/guides/angular
My guess is postcss is missing/misconfigured.

The tailwind integration is intended to just be a bridge for using tailwind definitions/colors in primeng themes. If setup properly you should be able to use tailwind on regular html elements

[github-actions]

More information is needed to find a solution. A runnable StackBlitz example and additional details would be helpful.

[mertsincan]

Unfortunately, I couldn't replicate it. Could you please attach a stackblitz link for us?