tailwindcss-primeui

Tailwind CSS Utilities for Prime UI Libraries

Extended utilities to integrate Prime UI library theming with Tailwind CSS and add the missing animation utilities from the legacy PrimeFlex.

Prime UI Library

This plugin requires a Prime UI library with the next-gen theming, compatible with styled and unstyled modes.

• primevue v4+
• primeng v18+
• @primereact/core v1+

Installation

Install the plugin from npm.

npm i tailwindcss-primeui

Add the plugin to your tailwind.config.js file.

// tailwind.config.js
module.exports = {
    // ...
    plugins: [require('tailwindcss-primeui')]
};

Colors

Prime UI libraries utilize a color palette that consists of primary colors and surfaces, these colors can be used as Tailwind extensions.

<div class="bg-primary text-primary-contrast border-primary-500">Content</div>
<div class="bg-surface-50 dark:bg-surface-900 text-surface-900 dark:text-surface-0 border-surface-200 dark:border-surface-700">Content</div>

Color	Description
primary-[50-950]	Primary colors
surface-[0-950]	Surface colors
primary	Default primary color
primary-contrast	Default primary contrast color
primary-emphasis	Default primary emphasis color

Special preset classes defined by the Prime UI library theme preset such as Aura, Lara, or Nora.

Color	Description
border-surface	Border 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
text-color-emphasis	Text color with emphasis
text-muted-color	Secondary text color
text-muted-color-emphasis	Secondary text color with emphasis

Animations

PrimeFlex provide various animation utilities that are missing in Tailwind CSS core, this plugin adds these plugins for migration.

Duration

Class	Properties
animate-duration-0	animation-duration: 0s;
animate-duration-75	animation-duration: 75ms;
animate-duration-100	animation-duration: 100ms;
animate-duration-150	animation-duration: 150ms;
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: 3000ms;

Delay

Class	Properties
animate-delay-none	animation-delay: 0ms;
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	Properties
animate-infinite	animation-iteration-count: infinite;
animate-once	animation-iteration-count: 1;
animate-twice	animation-iteration-count: 2;

Direction

Class	Properties
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	Properties
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	Properties
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	Properties
animate-running	animation-play-state: running;
animate-paused	animation-play-state: paused;

Backface Visibility

Class	Properties
backface-visible	backface-visibility: visible;
backface-hidden	backface-visibility: hidden;

Animations

Class	Properties
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	flipleft 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

Enter and Leave

| animate-enter | | | animate-leave | |

Fade In and Out

Values are derived from the Tailwind CSS opacity e.g. fade-in-50 and fade-out-20. Arbitrary values such as fade-in-[15] are also supported.

| fade-in-{value} | --p-enter-opacity: {value} | | fade-out-{value} | --p-leave-opacity: {value} |

Zoom In and Out

Values are derived from the Tailwind CSS scale e.g. zoom-in-50 and zoom-out-75. Arbitrary values such as zoom-in-[0.8] are also supported.

| zoom-in-{value} | --p-enter-scale: {value} | | zoom-out-{value} | --p-leave-scale: {value} |

Spin In and Out

Values are derived from the Tailwind CSS rotate e.g. spin-in-45 and spin-out-90. Arbitrary values such as spin-in-[60deg] are also supported.

| spin-in-{value} | --p-enter-rotate: {value} | | spin-out-{value} | --p-leave-rotate: {value} |

Slide In and Out

Values are derived from the Tailwind CSS translate e.g. slide-in-from-t-50 and slide-out-to-l-8. Arbitrary values such as slide-in-from-b-[8px] are also supported.

| slide-in-from-t-{value} | --p-enter-translate-y: -{value} | | slide-in-from-t-{value} | --p-enter-translate-y: {value} | | slide-in-from-t-{value} | --p-enter-translate-x: -{value} | | slide-in-from-t-{value} | --p-enter-translate-x: {value} | | slide-out-to-t-{value} | --p-leave-translate-y: -{value} | | slide-out-to-t-{value} | --p-leave-translate-y: {value} | | slide-out-to-t-{value} | --p-leave-translate-x: -{value} | | slide-out-to-t-{value} | --p-leave-translate-x: {value} |

Variant modifiers and breakpoints

All variants and breakpoints are supported.

<div class="lg:hover:bg-primary lg:hover:animate-fadein motion-reduce:animate-none">
    <!-- ... -->
</div>

Arbitrary values

Any value within the square brackets allow defining one-off values that do not need to be defined as a reusable utility.

<div class="animate-delay-[450ms] animate-duration-[4s]">
    <!-- ... -->
</div>

Customizing the Plugin

The default values can be customized using as a theme extension.

// tailwind.config.js
module.exports = {
    theme: {
        extend: {
            animationDelay: {
                475: '475ms',
                2000: '2s'
            },
            animationDuration: {
                4000: '4s',
                slow: '10s'
            }
        }
    },
    plugins: [require('tailwindcss-primeui')]
};