Tailwind CSS Presets for PrimeVue Launched 🚀

Installation with Nuxt

Setting up PrimeVue Unstyled and Tailwind CSS presets in a Nuxt project.

Tailwind CSS #

The prerequisite steps are covered by the Install Tailwind CSS with Nuxt guide. You may choose to install manually or via the Tailwind module of nuxt. If you have Nuxt and Tailwind configured successfully, follow the next steps.

Download #

PrimeVue is available for download on npm registry. For this setup, we'll also use the primevue-nuxt module.


# Using npm
npm install primevue
npm install --save-dev nuxt-primevue

# Using yarn
yarn add primevue
yarn add --dev nuxt-primevue

# Using pnpm
pnpm add primevue
pnpm add -D nuxt-primevue

Nuxt Config #

In your nuxt-config file, add the nuxt-primevue module and configure PrimeVue to be unstyled.


export default defineNuxtConfig({
    modules: [
        'nuxt-primevue'
    ],
    primevue: {
        options: {
          unstyled: true
        },
    }
})

Preset #

Download a release from github, alternatively you may use Preset Builder to dynamically build your release file with the components you need as the pre-build release package contains all the available components. Once the zip is downloaded, extract the contents to a folder of your choice e.g. ./presets and then in your nuxt-config file, configure the importPT property of PrimeVue to the main preset file.


import path from 'path';

export default defineNuxtConfig({
    modules: [
        'nuxt-primevue'
    ],
    primevue: {
        options: {
          unstyled: true
        },
        importPT: { from: path.resolve(__dirname, './presets/lara/') }      //import and apply preset   
    }
})

Tailwind Config #

The built-in presets utilize an extended color palette based on CSS variables that needs to be defined at tailwind.config.js. In addition, the presets folder is required to be scanned by Tailwind with the content property. If you are using the tailwind module, this can be done in a separate config file or using the nuxt config directly. Visit the overwriting the default configuration documentation for details.


export default {
    ...
    content: [
        "presets/**/*.{js,vue,ts}"
    ],
    theme: {
        extend: {
            colors: {
                'primary-50': 'rgb(var(--primary-50))',
                'primary-100': 'rgb(var(--primary-100))',
                'primary-200': 'rgb(var(--primary-200))',
                'primary-300': 'rgb(var(--primary-300))',
                'primary-400': 'rgb(var(--primary-400))',
                'primary-500': 'rgb(var(--primary-500))',
                'primary-600': 'rgb(var(--primary-600))',
                'primary-700': 'rgb(var(--primary-700))',
                'primary-800': 'rgb(var(--primary-800))',
                'primary-900': 'rgb(var(--primary-900))',
                'primary-950': 'rgb(var(--primary-950))',
                'surface-0': 'rgb(var(--surface-0))',
                'surface-50': 'rgb(var(--surface-50))',
                'surface-100': 'rgb(var(--surface-100))',
                'surface-200': 'rgb(var(--surface-200))',
                'surface-300': 'rgb(var(--surface-300))',
                'surface-400': 'rgb(var(--surface-400))',
                'surface-500': 'rgb(var(--surface-500))',
                'surface-600': 'rgb(var(--surface-600))',
                'surface-700': 'rgb(var(--surface-700))',
                'surface-800': 'rgb(var(--surface-800))',
                'surface-900': 'rgb(var(--surface-900))',
                'surface-950': 'rgb(var(--surface-950))'
            }
        }
    }
    ...
}

CSS Variables #

Final step is defining the default values for the colors in RGB format, this can be done in a global CSS file in your Nuxt application. See the styling section at Nuxt documentation for more information.


:root {
    --primary-50: 236 253 245;
    --primary-100: 209 250 229;
    --primary-200: 167 243 208;
    --primary-300: 110 231 183;
    --primary-400: 52 211 153;
    --primary-500: 16 185 129;
    --primary-600: 5 150 105;
    --primary-700: 4 120 87;
    --primary-800: 6 95 70;
    --primary-900: 4 78 56;
    --primary-950: 2 44 34;
    --surface-0: 255 255 255;
    --surface-50: 248 250 252;
    --surface-100: 241 245 249;
    --surface-200: 226 232 240;
    --surface-300: 203 213 225;
    --surface-400: 148 163 184;
    --surface-500: 100 116 139;
    --surface-600: 71 85 105;
    --surface-700: 45 55 72;
    --surface-800: 30 41 59;
    --surface-900: 15 23 42;
    --surface-950: 3 6 23;
}

Example #

Visit the nuxt-unstyled-tailwind project as an example.