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 |
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')]
};