Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

18 Beta 2 - Not all tailwind classes are available #16547

Open
cbjerg opened this issue Oct 14, 2024 · 0 comments
Open

18 Beta 2 - Not all tailwind classes are available #16547

cbjerg opened this issue Oct 14, 2024 · 0 comments
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@cbjerg
Copy link

cbjerg commented Oct 14, 2024

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

@cbjerg cbjerg added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Oct 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
Projects
None yet
Development

No branches or pull requests

1 participant