Skip to content

primefaces/tailwindcss-primeui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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