Primeng theme scss I've started by configuring The Most Complete Angular UI Component Library. json, I get the result I am looking for which is shown below. Contribute to primefaces/primeng development by creating an account on GitHub. I followed both the Tailwind and PrimeNG installation guides. npm install -g @angular/cli Once CLI is ready in your system, extract the contents of the zip file distribution, cd to the directory, install the libraries from npm and then execute "ng Feb 11, 2024 · Implement Dynamic Theme In Angular What is theme? Theme refers to a webpage or application's overall visual style and presentation. You can create a new theme by setting Colors are exported as CSS variables and used with the standard var syntax such as var (--text-color). Dec 2, 2023 · Did you follow the installation/setup guide and import the required styles? https://www. This tutorial provides ideas and solutions to get a theme to meet your needs. scss file after your customizations. Check out my new updated story to add a Dark Theme toggler in Angular with PrimeNG 18 and Tailwind! Theme PrimeNG provides 4 predefined themes out of the box; Aura, Material, Lara and Nora. Designer API is a SASS based theme engine to create PrimeNG themes easily featuring over 500 variables, a demo application and sample themes including the Nova and Luna theme families. If you like watching videos, you can watch the video version of this article on YouTube. scss file because this would make upgrading to later versions of the Ultima Theme harder. 0-rc. For more information, visit the new video tutorial. 6. Here is the problem, PrimeNG theme over writes my application font despite specifying font in styels. (update valid for "primeng": "^10. Styles can either be imported at angular. but always i do ng serve it doesn't work My styles. scss' if needed. Start using primeng-sass-theme in your project by running `npm i primeng-sass-theme`. config. json. Themes are not loaded correctly Primeng components styles are not applied correctly Angular upgrades from one version to other broken CSS styles Primeng version latest integration This post is my findings on the integration The most notable feature is the new styled mode implementation. Latest version: 17. For now im using a patch to override the style in my global styles. org/primeng-v16/installation#styles Mar 9, 2024 · This code snippet demonstrates adding TailwindCSS classes to a PrimeNG <button> component, enhancing its appearance with Tailwind's utility-first CSS classes for a more modern and responsive design. " It combines Tailwind CSS, PrimeNG 18, and the tailwindcss-primeui plugin to create user interface. The theme-base folder contains the theming structure of the components, themes under themes folder import the base and define the SCSS variables. I don't know how tho, but it is probably described on their documentation. Sometimes, you just have to modify SCSS/CSS to get what you need. 3. com To begin with clone the primeflex repo and then build the primeflex. Mar 20, 2025 · Troubleshooting PrimeNG issues: fix installation failures, resolve rendering issues, optimize performance, fix styling inconsistencies, and debug library integrations. Add providePrimeNG and provideAnimationsAsync to the list of providers in your app. Dec 23, 2024 · Previously, @import "primeng/resources/primeng. , can be done configurable by Sass variables. 0 #17059 Aug 20, 2020 · the them now that displayed are new themes base of primeng 10 and currently still in development at the time of writing this answer (PrimeNG 10. json 1-15 Styling Architecture Setup The styling system integrates SCSS, Tailwind CSS, and PrimeNG themes through a centralized import structure. Following is the list of general variables used in a theme. css file. spec. Note that, this particular configuration isn't required if you're utilizing the default system color Jan 24, 2025 · Using Scoped Design Tokens to Override Preset Styles in PrimeNG 19 PrimeNG 18 introduced a new theming system, based on a design token architecture, making it easier to use pre-developed styles or … The most notable feature is the new styled mode implementation. - Tom-DevWeb/How-Install-PrimeNG-Themes Apr 20, 2024 · I have set up PrimeNG themes according to their official documentation. Import PrimeNG's theme variables and override them. com Aug 4, 2025 · If you prefer to work directly with SCSS variables, you can create a custom theme file. This week I updated my first app with the latest 19 both Angular and PrimeNG. scss and in angular. Migration guide to PrimeNG v20. ts and use the theme property to configure a theme such as Aura. The base is the style rules with CSS variables as placeholders whereas the preset is a set of design tokens to feed a base by mapping the tokens to May 19, 2024 · I am using Bootstrap and PrimeNg together. css) Change all colors, etc as per your liking. I'm using SCSS, and I included Angular Material with a custom theme iirc. . Here is an example I made on stackblitz Screenshot of Feb 18, 2019 · how to config variables like colors、paddings,、margins and more use scss with primeng in project? I want to change the styles of some components with scss, but not found the methold, Is there any other solution? thanks. Feb 15, 2023 · I have added primeng to my Angular project. If I try to include PrimeNg in my project, I get failures (from webpack, I think): Errors similar to this: Apr 29, 2024 · } @import ". I have seen that PrimeFlex has been deprecated in favour of Tailwind 4. You can override the CSS with ::ng-deep. PrimeNG wraps the built-in style classes under the primeng cascade layer to make the library styles easy to override. Because in the dark theme the shadow of the raised button are not inverted in primeng. css" in style. scss, I have explicitly defined that there is layers, and in those layers, primeNG is 1. Buttons and borders are primarily affected by this. However, we realized that styles are not applied e Component Themes Poseidon offers 17 fully customizable built-in themes featuring different presets such as Aura, Lara and Nora. css are removed and replaced with a new architecture. Apparently it's related to the primeng lara-light-blue theme, for the moment we have reverted to the vers Nov 12, 2024 · When I use primeng themes via injecting the stylesheets in angular. After many tests I have seen the issues happens when I add tailwindcss and postcss. All borde Mar 5, 2025 · You'll need to complete a few actions and gain 15 reputation points before being able to upvote. Style Import Hierarchy The main stylesheet src/assets/styles. Styling is decoupled from the components using the themes instead. If you need to become more familiar with layers, visit the documentation at MDN to begin with. Sass approach The second way is more flexible and accurate. If you have a dark mode switch in your application, ensure that darkModeSelector is aligned with the Tailwind dark variant for seamless integration. x PrimeNG version 18. json or src/styles. Jul 16, 2024 · As I delved into PrimeNG and PrimeFlex for my recent Angular 17 standalone app with SSR, one aspect truly stood out: built-in themes. I’m having difficulty in getting the theme completely configured. Mar 13, 2019 · Why are the scss files in the prime-designer/assets/designer folder not a part of the PrimeNG project. But after I import Tailwind, the styles of Primeng are not applied any further I tried using the Tailwind prefix option, but as soon You'll need to complete a few actions and gain 15 reputation points before being able to upvote. scss. It goes like this: Setting up PrimeNG in an Angular CLI project. In styled mode, PrimeNG uses the system as the default darkModeSelector in theme configuration. May 23, 2024 · Using PrimeNG components in your templates The section focuses on incorporating PrimeNG components seamlessly into your templates. What's reputation and how do I get it? Instead, you can save this post to reference later. 0, last published: 3 days ago. I created an issue and working on a pr to resolve this. In case CLI is not installed already, use the command below to set it up. 3. Hi @jbarber2016 As of PrimeNG 18 forward, primeng/resources and theme. component. 0 Mar 25, 2024 · This style is imported in my styles. Primeng comes with its … Hi all, As part of the PrimeNG 2023 roadmap, we're excited to announce that Theme Designer is now open source and free to use. 4-SNAPSHOT by PrimeTek) all these themes are css files installs by as part of primeng and you have two method to include these themes angular. add the primeng imports to May 13, 2024 · How to use Primeng and Tailwind CSS in Your Angular 17 Project Primeng is a popular UI library that provides a rich set of pre-built components for Angular applications. CSS in your app without a layer has the highest CSS specificity, so you'll be Feb 14, 2021 · Make a copy of the base theme. I was following this tutorial: https://medium. Here you can find a the style of the dropdown Mar 20, 2025 · I am working with primeng and would like to overwrite the css variable value. The core provides flexible CSS classes with predefined CSS rules to build your own UI elements. 1. Feb 1, 2025 · I have update to PrimeNG 19. I want to use some primeng components, but migrating the theme from material to primeng has been awful. For example <p-dropdown styleClass="dropdown-style"> and in styles. dropdown-style to override the existing primeng style Oct 5, 2023 · Bootstrap seems to be overriding my PrimeNG styles, more specifically with it's _reboot. scss 1-6 orchestrates all styling Sep 10, 2025 · PrimeNG Theme Override Guide: Making Buttons Beautiful (And Not Boring) Because default themes are like vanilla ice cream — perfectly fine, but sometimes you crave rocky road. json instead within the "styles": [] option; so you might try that as well. Jun 23, 2021 · Make sure styles. Installing PrimeNG and PrimeTheme Run the following command: npm install primeng @primeng/themes Get Faisal Ahmed ’s stories in Dec 21, 2024 · This may include any custom CSS or SCSS that was part of Ultima’s design. scss file. In this repo you will find how to use a built-in theme and how to customize a theme. css and other style like primeng isn't working. what is included in the theme Colors: colors are mostly used in an … our primeng theme definition file: A shared scss file that has global styles for non-primeng components and defines my layers: An app-level style file that just imports the previous layers and styles: an app config imported into every app that uses the providePrimeNG () function to define the theme and it's layers: Summary The provided context outlines the process of customizing PrimeNG themes, particularly the MegaMenu component, in an Angular application, detailing how to add, customize, and override out-of-the-box themes using design tokens and CSS overrides. css file to styles. I'm trying to replicate the grayscale reference theme from the documentation but something's not quite working. scss even if the order is perfectly proper in angular. The main CSS settings, such as font, colors, border radius, etc. Dec 31, 2023 · #Primeng styles #How to fix primeng CSS styles not working in Angular? #Conclusion This post is a solution for the different below issues for Primeng CSS styles in Angular. I added a couple dummy components, and the app still built fine. The themes folder also contains all the built-in themes so you can customize their code as well. css @import " I made a POC on a brand new empty angular project. This is updated answer for anyone facing a similar issue as above in 2020. Here is the updated roadmap for the features ahead; The new documentation with 700+ new demos are planned for next week. Improving the codebase for strict types Generate API doc from the new enhanced typings Move May 7, 2025 · I want to use PrimeNG v19 and Tailwind CSS v4 for an Angular project. x. css; We were doing it, but it was removed, now I want to add the Aura theme as mentioned in the doc, but I encounter this error in the compiled section. 2-) We have plans to implement unstyled mode to PrimeNG and it won't break previous theming, we have implemented it into PrimeReact and PrimeVue, you can Aug 4, 2025 · The code snippet you shared is a really clean and modern way to handle theming in PrimeNG 18 and 19. When I try to npm run prerender, the following error appear : "Unable to extract routes from application. In version 14. Now I can see that border-radius is not getting applied to buttons PrimeIcons, PrimeNG's default icon library, offers over 250 open-source icons for flexible use in templating or with PrimeNG components. A set of reusable classes can also be grouped as a Tailwind CSS component Jun 16, 2024 · November 2024 update With the PrimeNG version 18 update, the dark theme integration has changed. Current versions is Angular v20 with PrimeNG v20. Upvoting indicates when questions and answers are useful. 0. - borjamrd/ng-primeng-tailwind Mar 13, 2019 · Why are the scss files in the prime-designer/assets/designer folder not a part of the PrimeNG project. html) where you want to use PrimeNG components. 0-RC. The application also leverages a custom PrimeNG theme designed to be fully compatible with Tailwind CSS. It uses the providePrimeNG function, which is a new and improved method compared to older versions. While these libraries have their strengths, in this blog post, we’ll explore why PrimeNG stands out as a rich and versatile choice for your Angular projects. I’ve been using PrimeNG since Angular 4. Integration between PrimeNG and Tailwind CSS. scss file as shown below. Contribute to primefaces/primeng-sass-theme development by creating an account on GitHub. CSS in your app without a layer has the highest CSS specificity, so you'll be Nov 1, 2024 · The integration of PrimeNG is a lot simpler in v18, we don’t have to fiddle with angular. Feb 8, 2023 · The issue is that only style. It is possible to use primeng ^17. Jan 13, 2025 · PrimeNG Theme Customization — v19 in Angular. Nov 1, 2024 · The integration of PrimeNG is a lot simpler in v18, we don’t have to fiddle with angular. We can simply load PrimeNG using the PrimeNGConfig theme provider: The @layer is a standard CSS feature to define cascade layers for a customizable order of precedence. "styles": [ "src/styles. I updated my apps to Angular 18 and PrimeNG 17, because PrimeNG was late in updating. Import the Ultima theme (or an equivalent, if it's hosted externally) into your styles. (this is not important but this will make my issue more clear and what I try to achieve) for example if I have an badge and i would like to set the background color. When Oct 4, 2021 · PrimeNG now allows to create custom themes using the primeng-sass-theme repository, you will need to set all the variables from the mythemes folder as said in the doc and import it into your project. May 23, 2024 · After upgrading my Angular core libraries to version 18, I migrated to Angular Material 18 by running: ng update @angular/material The update went smoothly but when I tried to compile my app I got This video will show you when to modify the PrimeNG Theme and when not to. 1 Reproducer No response Angular version 18. scss: @import '. I mean, in my root folder, styles. json or the root style. css", & Oct 22, 2023 · Hello, We would like to override a variable without changing the variables. An angular-cli project based on @angular/animations, @angular/common, @angular/compiler, @angular/core, @angular/forms, @angular/platform-browser, @angular/platform-browser-dynamic, @angular/router, core-js, rxjs, tslib and zone. Previous iterations use SASS at an external repo called PrimeNG-sass-theme which requires compilation of a theme. ts). PrimeNG Sass Theme. scss file Apr 15, 2025 · 2 I'm creating a new Angular 19 project using PrimeNG 19 and Tailwind CSS v4. in my debug console I can retrieve the styling that is applied. /variables. scss"; But my console says: 2: implicit outer layers: 0 primeNG, 1 bootstrap-r, and so bootstrap is taking precedence on primeNG and I can't achieve my desired design. We advice you should use either latest versions or LTS versions of PrimeNG along with primeng sass theme to get the latest updates, bug fixes and theme updates. Setting Up an Angular 19 Project npm install -g @angular/cli // make sure installed angular 19 ng new dark-mode-demo --style=scss cd dark-mode-demo ng serve 4. PrimeUIX Themes PrimeUIX is a shared package between all Prime libraries, this shared approach allows PrimeTek teams to share theming and the Design team who is responsible for the Figma UI Kit to work on Sep 29, 2023 · Hi, Thanks for using PrimeNG in your apps. Nov 18, 2024 · Describe the bug The "themes" folder supposed to host the logic for themes manipulation went missing between beta3 and beta4 Environment 18. Then I needed to Mar 19, 2025 · In PrimeNG v17, I was able to achieve this by modifying the theme. scss and angular. / Jan 23, 2025 · Found a way to tune the primeng 19 now default theme by setting your own layer overriding the primeng layer Proceed like in the tailwind styling integration guide: Nov 26, 2017 · 4 - You can adjust scss variables in '. Dec 16, 2024 · Error related to themes not being imported properly on version 18. css", you will notice all css variables created in :root, but weirdly, they are not used at all. Contribute to aboudard/angular-primeng-migration development by creating an account on GitHub. But after I import Tailwind, the styles of Primeng are not applied any further I tried using the Tailwind prefix option, but as soon Oct 6, 2023 · I am working on a project using Angular and Tailwind and recently we decided to add PrimeNG to take advantage of some of the components they have. Step 1: Set Up Button is an extension to standard button element with icons and theming. scss use . Example Angular app demonstrating the creation of a custom PrimeNG Sass theme - pfbrowning/primeng-custom-theme-example PrimeNG Theming with SASS. Example Angular app demonstrating the creation of a custom PrimeNG Sass theme - pfbrowning/primeng-custom-theme-example Dec 21, 2024 · Status: Needs TriageIssue will be reviewed by Core Team and a relevant label will be added as soon as possibleIssue will be reviewed by Core Team and a relevant label will be added as soon as possible After upgrading to Primeng 19, my styles. But the real cherry on top? Sep 27, 2023 · Describe the bug After updating to primeng 16. scss file—replacing :root with :host and importing the theme inside the root Shadow DOM component (app. Table of Contents · Add the OOTB Theme · Customize the OOTB Theme · Component Customization: MegaMenu Component In this article, we’ll explore Example Angular app demonstrating the creation of a custom PrimeNG Sass theme - pfbrowning/primeng-custom-theme-example May 18, 2021 · We introduced CSS variables in Version 11. e. css from primeng (Find it from node_modules/primeng/resources/themes/{your_theme}/theme. But the styles don't work. The code snippet you shared is a really clean and modern way to handle theming in PrimeNG 18 and 19. I have to search and replace color by code in a lot of primeng scss files (variables, buttons, data, form, menu, overlay. I hope I could help you. Whether you have your own style guide or just need a custom theme, Designer API is the right tool to design and bring them to existence. Dec 28, 2021 · Dynamically Switch Angular App Theme among Material, Bootstrap and Custom Themes at Runtime Using PrimeNG Jan 7, 2025 · The Most Complete Angular UI Component Library. PrimeNG's official Getting Started is great, but this post distills it and combines information from other parts of the documentation so all you need to get started with all that PrimeNG offers is in one spot. 0 and bootstrap ^5. json, then override the styleClass provided by primeng. scss . I suggest you looking into Guides -> Migration to V18 -> SASS Themes, Theming and Tailwindcss. May 24, 2024 · Introduction to PrimeNG As an Angular developer, you’re probably aware of the numerous UI libraries available, such as Angular Material, PrimeNG, Clarity, NG Bootstrap, Kendo UI, Taiga UI, daisyUI and Spartan. 2" and angular v~10. scss if you're using a template) inside of my angular-cli. 1 Build / Runtim PrimeNG Theming with SASS. Feb 11, 2025 · The following is a simple step-by-step guide on how to create a basic Angular v20 project that uses SCSS as a stylesheet format, and PrimeNG v19 with TailwindCSS v4. Nov 9, 2019 · Theming a web application can be a daunting task. scss (or layout. This approach integrates theme configuration directly into your Angular application's providers, making it super easy to manage. json 11-14 - src/**/*. scss at the most bottom line in angular. js Ultima is an application template for Angular and is distributed as a CLI project. primefaces. See full list on browninglogic. Summary: To fix the issue and migrate to PrimeNG 19 with the Ultima theme: Ensure the Ultima theme is installed and available. This article will explain how to use the new Prim Tagged with angular, primeng, webdev, tutorial. Conclusion Integrating Storybook with PrimeNG and TailwindCSS in an Nx workspace elevates your development workflow, making it more efficient and your applications more scalable and visually I added the dependency and added theme. I have put the styles in style. Aug 29, 2023 · I have noticed something strange with tailwind provided themes, If you look at any themes located in "primeng/resources/themes/*/theme. Aug 13, 2020 · I am finding some problem trying to convert an Angular project using CSS into a project usinc SCSS SASS. PrimeNG is a design agnostic library so unlike some other UI libraries it does not enforce a certain styling such as material design. 7. Dec 27, 2024 · In this quick guide, we will learn how to modify theme for Angular Material 19 with SCSS mixins and CSS variables. 18. Aug 26, 2024 · Maybe the problem is you have a older theme compiled, remember allways check if your are using a custom theme, and not directly from the primeng installation, you will need to compile yourself your custom theme or use the base themes. The base is the style rules with CSS variables as placeholders whereas the preset is a set of design tokens to feed a base by mapping the tokens to Theme and Core styles are the necessary css files of the components, visit the Themes section for the complete list of available themes to choose from. This file had to be included in the application and need to be swapped at runtime for basic tasks like dark mode or primary color changes. However, when I run my application, the PrimeNG styles are not being applied (for example, input fields like the following have no border). Described here (Changes all components, so probably not the solution) You can also customize the PrimeNg theme to suite your needs. The following dependencies are used in the project: "@primeng Jan 12, 2025 · PrimeNG: Highly customizable but has documentation that’s a bit lacking in clarity. 6) Essentially there are three ways of importing free primeng themes in an angular 2+ application. /node_modules/primeng/resources/themes/omega/theme. json Jan 10, 2025 · Thasnks this is a nice topic i would want to override the style of a var too. PrimeNg migration project from v17 to v18. I choosed the bootstrap-based scss files. We are working on modifying both the theming engine and the token structure to make this conversion easier. 4. Tailwind CSS is a popular CSS framework based on a utility-first design. Creating Project with Angular Material 19 Let's start by creating a new Angular project with Angular Material 19. Explore Verona's documentation for PrimeNG, offering insights into its UI components, features, and tools for creating dynamic web applications. ts and type definitions Sources: tsconfig. What is PrimeNG? PrimeNG What will you learn in this tutorial? Styling with CSS/SCSS without modifying the theme Using ::ng-deep and when (not) to use it Customizing styles with the PrimeNG Theme API 🎯 If you want to Oct 11, 2023 · I tried to create a project using both tailwindcss and primeng. Problem I'm using the latest, as of Feb 2018, Angular 5. The dropdown will be adjusted accordingly. Below is the code I tried and same code works on the css file. This repository contains all the scss files for the components and the variables of the built-in themes so that you may customize an existing theme or create your own. scss in the lara-light or lara-dark of the primeng-sass-theme project. css a file. There are no other projects in the npm registry using primeng-sass-theme. Apr 25, 2017 · This was the easiest way to create your custom themes without requiring knowledge of CSS. PrimeNG Theming with SASS. 1-) Yes it's recommended approach. 9. I have also clone the PrimeNG repo and noticed you use Tailwind 3 and the configuration file Dec 31, 2023 · primeng button angular styles and colors, click disabled label icon example and button size click event binding attribute property binding Apr 23, 2022 · In this post, I will focus on adding PrimeNG components to the project we created in Getting Started with Angular. Nov 2, 2020 · I was trying to override one of the default style on the primeng card but some reason when I use the scss file, style is not applied. I used PrimeNG@17 and custom theme files as your guide describes. Combination between TailwindCSS and Primeng for Angular 17 with Theme Switcher. I successfully overide most of the scss variables and I was able to customize the theme successfully. Nov 6, 2023 · Hello, as of now, our token structure is not in a position to easily convert your design system into CSS. 5 and Angular 19. 0 it was possibl Oct 19, 2021 · There are multiple ways to solve your problem You can configure PrimeNg to use a dark theme. This styling change is backward compatible, meaning the opinionated ng-invalid. Due to this, I'm not sure why, but my prime ng's styles are being overridden by my properties mentioned in _reset-and-normalize. This is my first time working with both PrimeNG and Tailwind CSS. Oct 15, 2024 · I'm running into issues customizing the PrimeNG 18 theme. However, almost all tokens have their counterparts in _variables. After exploring PrimeNG’s components and themes, I liked what I saw and decided to go with it. ng-dirty class is still included however in future versions, it will be removed. Mar 2, 2024 · changed the title Upgrade to Angular 17 Upgrade to Primeng v17 on Mar 2, 2024 Checkbox is a customizable component that extends the standard checkbox element with theming options for Angular applications. scss can no longer resolve the primeng css resources. It works fine, but how can I write a few custom CSS styles with the themes? I have this code in my mode-dark. Steps Create a file like src/app/custom-theme. Oct 11, 2023 · I tried to create a project using both tailwindcss and primeng. This gives you maximum control but requires a bit more setup. First importing all bootstrap scss then I am importing theme. Aug 1, 2025 · Test Files: tsconfig. See the theming documentation for details. Nov 30, 2023 · Describe the bug When using primeng and tailwindcss together the preflight styles from tailwind overwrite the some styles from primeng. scss from saga-blue theme. Follow these steps to utilize PrimeNG components: Open a component template file (. Feb 3, 2017 · A lot has changed since the question was first asked (in 2017) wrt the way themes (free and commercial) are available with primeng. 2 in an Angular 17 project? I want to use bootstrap for the public part of my application, but there is an admin section where I would like Jul 15, 2024 · As I delved into PrimeNG and PrimeFlex for my recent Angular 17 standalone app with SSR, one aspect truly stood out: built-in themes… Dec 8, 2024 · Describe the bug According to the official website, after installing the latest version of primeng npm install primeng do the following for prime ng styles: But the latest primeng version i. Place the PrimeNG My company already has an angular material theme. Abstract The web content delves into the customization of PrimeNG's UI components within an Angular framework, focusing on the MegaMenu May 22, 2021 · I created an Angular project using the CLI. scss is taken into account but the theme. Feb 15, 2025 · Basic knowledge of Angular and PrimeNG is helpful. Refer to Sass documentation for more information about how to build scss files. 2. It is preferable to create a new theme manually by Sass because the theme is better maintainable. 0 the styles for the p-button, p-menu and a p-card that I noticed were not working. I have included the part's where I have referenced it in my styles. Unlike Material UI, PrimeNG offers a delightful selection of pre-built themes that you can easily configure within your application. A theme consists of two parts; base and preset. I found that the primeng designer app is not longer available. 1 and its CLI 1. As these files are not open source it is very difficult to create PrimeNG themes and distribute them with open source projects. For example, instead of an opinionated btn class as in Bootstrap, Tailwind offers primitive classes like bg-blue-500, rounded and p-4 to apply a button. Dec 13, 2017 · Sometimes when I've had issues with primeng styles (or because I wanted to use a different pathing setup), I load the theme. We will learn how to leverage the extensive library of PrimeNG components effectively within your web applications.