Tailwind CSS

Integration between PrimeNG and Tailwind CSS.

Overview #

Tailwind CSS is a popular CSS framework based on a utility-first design. The core provides flexible CSS classes with predefined CSS rules to build your own UI elements. 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. A set of reusable classes can also be grouped as a Tailwind CSS component and there are even a couple of libraries that take this approach to build components specifically for Tailwind.

Tailwind is an outstanding CSS library, however it lacks a true comprehensive UI suite when combined with Angular, this is where PrimeNG comes in by providing a wide range of highly accessible and feature rich UI component library. The core of PrimeNG does not depend on Tailwind CSS.

Plugin #

The tailwindcss-primeui is an official plugin by PrimeTek to provide first class integration between a Prime UI library like PrimeNG and Tailwind CSS. It is designed to work both in styled and unstyled modes. In styled mode, for instance the semantic colors such as primary and surfaces are provided as Tailwind utilities e.g. bg-primary, text-surface-500, text-muted-color.

If you haven't already done so, start by integrating Tailwind into your project. Detailed steps for this process can be found in the Tailwind documentation. After successfully installing Tailwind, proceed with the installation of the PrimeUI plugin. This single npm package comes with two libraries: the CSS version is compatible with Tailwind v4, while the JS version is designed for Tailwind v3.

npm i tailwindcss-primeui

Tailwind v4

In the CSS file that contains the tailwindcss import, add the tailwindcss-primeui import as well.

@import "tailwindcss";
@import "tailwindcss-primeui";

For a comprehensive starter guide, review the primeng-quickstart-tailwind repository which demonstrates the integration.

Tailwind v3

Use the plugins option in your Tailwind config file to configure the plugin.

// tailwind.config.js
import PrimeUI from 'tailwindcss-primeui';

export default {
    // ...
    plugins: [PrimeUI]
};

Extensions #

The plugin extends the default configuration with a new set of utilities. All variants and breakpoints are supported e.g. dark:sm:hover:bg-primary.

Color Palette

Class	Property
primary-[50-950]	Primary color palette.
surface-[0-950]	Surface color palette.
primary	Default primary color.
primary-contrast	Default primary contrast color.
primary-emphasis	Default primary emphasis color.
border-surface	Default primary emphasis color.
bg-emphasis	Emphasis background e.g. hovered element.
bg-highlight	Highlight background.
bg-highlight-emphasis	Highlight background with emphasis.
rounded-border	Border radius.
text-color	Text color with emphasis.
text-color-emphasis	Default primary emphasis color.
text-muted-color	Secondary text color.
text-muted-color-emphasis	Secondary text color with emphasis.

Dark Mode #

In styled mode, PrimeNG uses the system as the default darkModeSelector in theme configuration. If you have a dark mode switch in your application, ensure that darkModeSelector is aligned with the Tailwind dark variant for seamless integration. Note that, this particular configuration isn't required if you're utilizing the default system color scheme.

Suppose that, the darkModeSelector is set as my-app-dark in PrimeNG.

providePrimeNG({
    theme: {
        preset: Aura,
        options: {
            darkModeSelector: '.my-app-dark'
        }
    }
})

Tailwind v4

Add a custom variant for dark with a custom selector.

@import "tailwindcss";
@import "tailwindcss-primeui";
@custom-variant dark (&:where(.my-app-dark, .my-app-dark *));     //dark mode configuration

Tailwind v3

Use the plugins option in your Tailwind config file to configure the plugin.

// tailwind.config.js
import PrimeUI from 'tailwindcss-primeui';

export default {
    darkMode: ['selector', '[class~="my-app-dark"]'],           //dark mode configuration
    plugins: [PrimeUI]
};

Override #

Tailwind utilities may not be able to override the default styling of components due to css specificity, there are two possible solutions; Import and CSS Layer.

Important

Use the ! as a prefix to enforce the styling. This is not the recommend approach, and should be used as last resort to avoid adding unnecessary style classes to your bundle.

Tailwind v4

<input pInputText placeholder="Overriden" class="p-8!" />

Tailwind v3

<input pInputText placeholder="Overriden" class="!p-8" />

CSS Layer

CSS Layer provides control over the css specificity so that Tailwind utilities can safely override components.

Tailwind v4

Ensure primeng layer is after theme and base, but before the other Tailwind layers such as utilities.

providePrimeNG({
    theme: {
        preset: Aura,
        options: {
            cssLayer: {
                name: 'primeng',
                order: 'theme, base, primeng'
            }
        }
    }
})

No change in the CSS configuration is required.

@import "tailwindcss";
@import "tailwindcss-primeui";

Tailwind v3

The primeng layer should be between base and utilities.

providePrimeNG({
    theme: {
        preset: Aura,
        options: {
            cssLayer: {
                name: 'primeng',
                order: 'tailwind-base, primeng, tailwind-utilities'
            }
        }
    }
})

Tailwind v3 does not use native layer so needs to be defined with CSS.

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

@layer tailwind-base {
  @tailwind base;
}

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

Samples #

Example uses cases with PrimeNG and Tailwind CSS.

Color Palette #

PrimeNG color palette as utility classes.

primary
0
50
100
200
300
400
500
600
700
800
900
950
surface
0
50
100
200
300
400
500
600
700
800
900
950

primary

highlight

box

Form #

Using Tailwind utilities for the responsive layout of a form with PrimeNG components.

Firstname

Lastname

Date

Country

Message

Headless #

A headless PrimeNG dialog with a custom UI.

Animations #

The plugin also adds extended animation utilities that can be used with the styleclass and animateonscroll directives.

<p-select [(ngModel)]="animation" [options]="animations" placeholder="Select One" class="w-full sm:w-44" />
<div class="py-8 overflow-hidden">
   <div [ngClass]="dynamicAnimationClasses"></div>
</div>

Animations

Class	Property
animate-fadein	fadein 0.15s linear
animate-fadeout	fadeout 0.15s linear
animate-slidedown	slidedown 0.45s ease-in-out
animate-slideup	slideup 0.45s cubic-bezier(0, 1, 0, 1)
animate-scalein	scalein 0.15s linear
animate-fadeinleft	fadeinleft 0.15s linear
animate-fadeoutleft	fadeoutleft 0.15s linear
animate-fadeinright	fadeinright 0.15s linear
animate-fadeoutright	fadeoutright 0.15s linear
animate-fadeinup	fadeinup 0.15s linear
animate-fadeoutup	fadeoutup 0.15s linear
animate-fadeindown	fadeindown 0.15s linear
animate-fadeoutup	fadeoutup 0.15s linear
animate-width	width 0.15s linear
animate-flip	flip 0.15s linear
animate-flipup	flipup 0.15s linear
animate-flipleft	fadein 0.15s linear
animate-flipright	flipright 0.15s linear
animate-zoomin	zoomin 0.15s linear
animate-zoomindown	zoomindown 0.15s linear
animate-zoominleft	zoominleft 0.15s linear
animate-zoominright	zoominright 0.15s linear
animate-zoominup	zoominup 0.15s linear

Animation Duration

Class	Property
animate-duration-0	animation-duration: 0s
animate-duration-75	animation-duration: 75ms
animate-duration-100	animation-duration: 100ms
animate-duration-200	animation-duration: 200ms
animate-duration-300	animation-duration: 300ms
animate-duration-400	animation-duration: 400ms
animate-duration-500	animation-duration: 500ms
animate-duration-700	animation-duration: 700ms
animate-duration-1000	animation-duration: 1000ms
animate-duration-2000	animation-duration: 2000ms
animate-duration-3000	animation-duration: 300ms

Animation Delay

Class	Property
animate-delay-none	animation-duration: 0s
animate-delay-75	animation-delay: 75ms
animate-delay-100	animation-delay: 100ms
animate-delay-150	animation-delay: 150ms
animate-delay-200	animation-delay: 200ms
animate-delay-300	animation-delay: 300ms
animate-delay-400	animation-delay: 400ms
animate-delay-500	animation-delay: 500ms
animate-delay-700	animation-delay: 700ms
animate-delay-1000	animation-delay: 1000ms

Iteration Count

Class	Property
animate-infinite	animation-iteration-count: infinite
animate-once	animation-iteration-count: 1
animate-twice	animation-iteration-count: 2

Direction

Class	Property
animate-normal	animation-direction: normal
animate-reverse	animation-direction: reverse
animate-alternate	animation-direction: alternate
animate-alternate-reverse	animation-direction: alternate-reverse

Timing Function

Class	Property
animate-ease-linear	animation-timing-function: linear
animate-ease-in	animation-timing-function: cubic-bezier(0.4, 0, 1, 1)
animate-ease-out	animation-timing-function: cubic-bezier(0, 0, 0.2, 1)
animate-ease-in-out	animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1)

Fill Mode

Class	Property
animate-fill-none	animation-fill-mode: normal
animate-fill-forwards	animation-fill-mode: forwards
animate-fill-backwards	animation-fill-mode: backwards
animate-fill-both	animation-fill-mode: both

Play State

Class	Property
animate-running	animation-play-state: running
animate-paused	animation-play-state: paused

Backface Visibility State

Class	Property
backface-visible	backface-visibility: visible
backface-hidden	backface-visibility: hidden

Theme Designer

Theme Designer is the ultimate tool to customize and design your own themes featuring a visual editor, Figma to theme code, cloud storage, and migration assistant.