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 className 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 PrimeReact comes in by providing a wide range of highly accessible and feature rich UI component library. The core of PrimeReact does not depend on Tailwind CSS, instead we provide the necessary integration points such as the primeui tailwind plugin and the Tailwind version for the unstyled mode.

Tailwind Theme#

PrimeTek offers the Tailwind CSS version of the entire PrimeReact UI suite in unstyled mode based on the @apply directive with IntelliSense support. Visit the Tailwind version of PrimeReact for the documentation, demos and additional resources.

Plugin#

The tailwindcss-primeui is an official plugin by PrimeTek to provide first className integration between a Prime UI library like PrimeReact 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';

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 whose values are derived from the PrimeReact theme in use. All variants and breakpoints are supported e.g. dark:sm:hover:bg-primary.

Dark Mode#

In styled mode, PrimeReact 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 PrimeReact.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import { PrimeReactProvider } from '@primereact/core';
import Aura from '@primeuix/themes/aura';
 
const primereact = {
    theme: {
        preset: Aura,
        options: {
            darkModeSelector: '.my-app-dark'
        }
    }
};
 
createRoot(document.getElementById('root')!).render(
    <StrictMode>
        <PrimeReactProvider {...primereact}>
            <App />
        </PrimeReactProvider>
    </StrictMode>
);

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', '[className~="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; 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#

<InputText placeholder="Overriden" className="p-8!" />

Tailwind v3#

<InputText placeholder="Overriden" className="!p-8" />

CSS Layer#

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

Tailwind v4#

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

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import { PrimeReactProvider } from '@primereact/core';
import Aura from '@primeuix/themes/aura';
 
const primereact = {
    theme: {
        preset: Aura,
        options: {
            cssLayer: {
                name: 'primereact',
                order: 'theme, base, primereact'
            }
        }
    }
};
 
createRoot(document.getElementById('root')!).render(
    <StrictMode>
        <PrimeReactProvider {...primereact}>
            <App />
        </PrimeReactProvider>
    </StrictMode>
);

No change in the CSS configuration is required.

@import 'tailwindcss';
@import 'tailwindcss-primeui';

Tailwind v3#

The primereact layer should be between base and utilities.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import { PrimeReactProvider } from '@primereact/core';
import Aura from '@primeuix/themes/aura';
 
const primereact = {
    theme: {
        preset: Aura,
        options: {
            cssLayer: {
                name: 'primereact',
                order: 'tailwind-base, primereact, tailwind-utilities'
            }
        }
    }
};
 
createRoot(document.getElementById('root')!).render(
    <StrictMode>
        <PrimeReactProvider {...primereact}>
            <App />
        </PrimeReactProvider>
    </StrictMode>
);

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

@layer tailwind-base, primereact, tailwind-utilities;
 
@layer tailwind-base {
    @tailwind base;
}
 
@layer tailwind-utilities {
    @tailwind components;
    @tailwind utilities;
}

Samples#

Example uses cases with PrimeReact and Tailwind CSS.

Color Palette#

PrimeReact color palette as utility classes.

<div className="flex flex-col gap-12">
    <div className="flex gap-6 flex-wrap">
        <div className="rounded-border p-4 border border-transparent flex items-center justify-center bg-primary hover:bg-primary-emphasis text-primary-contrast font-medium flex-auto transition-colors">primary</div>
        <div className="rounded-border p-4 border border-transparent flex items-center justify-center bg-highlight hover:bg-highlight-emphasis font-medium flex-auto transition-colors">highlight</div>
        <div className="rounded-border p-4 border border-surface flex items-center justify-center text-muted-color hover:text-color hover:bg-emphasis font-medium flex-auto transition-colors">box</div>
    </div>
</div>

Starter#

The Tailwind v4 and PrimeReact 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 components.

Animation Name#

Animation Duration#

Animation Delay#

Iteration Count#

Direction#

Timing Function#

Fill Mode#

Play State#

Backface Visibility State#

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.

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.

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.

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.