Tailwind CSS
Integration between PrimeVue and Tailwind CSS both in styled and unstyled modes.
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.
Tailwind is an outstanding CSS library, however it lacks a true comprehensive UI suite when combined with Vue.js, this is where PrimeVue comes in by providing a wide range of highly accessible and feature rich UI component library. The core of PrimeVue does not depend on Tailwind CSS, instead we provide the necessary integration points such as the primeui tailwind plugin or a spin-off UI library called Volt based on unstyled PrimeVue.
Tailwind CSS and PrimeVue can be used together via two main approaches to choose from. First approach is using Tailwind CSS around the styled PrimeVue components as demonstrated in the samples section below. The second alternative approach takes the integration a step further by replacing the default design token based styled mode with the unstyled mode and utilizing Tailwind CSS within the component internals via pass-through feature.
Plugin #
The tailwindcss-primeui is an official plugin by PrimeTek to provide first class integration between a Prime UI library like PrimeVue 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.
Tailwind v4
In the CSS file that contains the tailwindcss import, add the tailwindcss-primeui import as well.
Tailwind v3
Use the plugins option in your Tailwind config file to configure the plugin.
Extensions #
The plugin extends the default configuration with a new set of utilities whose values are derived from the PrimeVue theme in use. 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 | Content 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 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, PrimeVue 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 PrimeVue.
Tailwind v4
Add a custom variant for dark with a custom selector.
Tailwind v3
Use the plugins option in your Tailwind config file to configure the plugin.
Override #
Tailwind utilities may not be able to override the default styling of components due to css specificity, there are two possible solutions; Important 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
Tailwind v3
CSS Layer
CSS Layer provides control over the css specificity so that Tailwind utilities can safely override components.
Tailwind v4
Ensure primevue layer is after theme and base, but before the other Tailwind layers such as utilities.
No change in the CSS configuration is required.
Tailwind v3
The primevue layer should be between base and utilities.
Tailwind v3 does not use native layer so needs to be defined with CSS.
Samples #
Example uses cases with PrimeVue and Tailwind CSS.
Color Palette #
PrimeVue color palette as utility classes.
- primary050100200300400500600700800900950
- surface050100200300400500600700800900950
Form #
Using Tailwind utilities for the responsive layout of a form with PrimeVue components.
Headless #
A headless PrimeVue dialog with a custom UI.
Starter #
The Tailwind v4 and PrimeVue starter example is available to demonstrate the integration setup with an example dashboard.
Animations #
The plugin also adds extended animation utilities that can be used with the styleclass and animateonscroll directives.
Enter and Leave
In addition to the prebuilt animations, you may also build your own declaratively using the animate-enter and animate-leave along with the opacity, rotate, scale and translate parameters. These animations work perfectly with the AnimateOnScroll directive, visit this directive for various examples.
Learn MoreAnimations
| Class | Property |
|---|---|
| animate-enter | animation-name: enter; --p-enter-opacity: initial; --p-enter-scale: initial; --p-enter-rotate: initial; --p-enter-translate-x: initial; --p-enter-translate-y: initial; |
| animate-leave | animation-name: leave; --p-leave-opacity: initial; --p-leave-scale: initial; --p-leave-rotate: initial; --p-leave-translate-x: initial; --p-leave-translate-y: initial; |
| 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 |
| animate-duration-[value] | animation-duration: value |
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 |
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.
| Class | Property |
|---|---|
| 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.
| Class | Property |
|---|---|
| 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.
| Class | Property |
|---|---|
| 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.
| Class | Property |
|---|---|
| slide-in-from-t-{value} | --p-enter-translate-y: -{value} |
| slide-in-from-b-{value} | --p-enter-translate-y: {value} |
| slide-in-from-l-{value} | --p-enter-translate-x: -{value} |
| slide-in-from-r-{value} | --p-enter-translate-x: {value} |
| slide-out-to-t-{value} | --p-leave-translate-y: -{value} |
| slide-out-to-b-{value} | --p-leave-translate-y: {value} |
| slide-out-to-l-{value} | --p-leave-translate-x: -{value} |
| slide-out-to-r-{value} | --p-leave-translate-x: {value} |