vuejs3tailwind-cssviteprimevue

Primevue tailwind vue vite problem with component (Toast) styling

I'm setting up my frontend with:

I've followed the docs for unstyled with pt: Lara.

When using a from primevue and set severity to 'danger' the button is styled correctly. However, now I'm using the component, but it remains unstyled. my Toast example

The app.vue (used for testing) is as follow:

<template>
    <div class="card flex justify-center">
        <Toast />
        <Button label="Show" @click="show()" />
    </div>
    <Button label="Danger" severity="danger" />
</template>

<script setup>
    import { useToast } from "primevue/usetoast";
    const toast = useToast();

    const show = () => {
        toast.add({ severity: 'danger', summary: 'Info', detail: 'Message Content', life: 6000 });
    };
</script>

taiwind config:

/** @type {import('tailwindcss').Config} */

export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    "./assets/presets/**/*.{vue,js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {
      colors: {
        primary: 'rgb(var(--primary))',
        'primary-inverse': 'rgb(var(--primary-inverse))',
        'primary-hover': 'rgb(var(--primary-hover))',
        'primary-active-color': 'rgb(var(--primary-active-color))',

        'primary-highlight': 'rgb(var(--primary)/var(--primary-highlight-opacity))',
        'primary-highlight-inverse': 'rgb(var(--primary-highlight-inverse))',
        'primary-highlight-hover': 'rgb(var(--primary)/var(--primary-highlight-hover-opacity))',

        '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))'
      }
    },
  },
  plugins: [],
}

the main.js:

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import PrimeVue from 'primevue/config'
import Lara from '@/assets/presets/lara'

import App from './App.vue'
import router from './router'

// Import components from Primevue

import Button from 'primevue/button'
import FloatLabel from 'primevue/Floatlabel'
import InputText from 'primevue/inputtext'
import Toast from 'primevue/toast'
import ToastService from 'primevue/toastservice'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(PrimeVue,{
    unstyled: true,
    pt: Lara,
})
app.use(ToastService)

app.component("Button",Button)
app.component("FloatLabel",FloatLabel)
app.component("InputText",InputText)
app.component("Toast",Toast)

app.mount('#app')

ps. for example the "info" and/or "life" props in the configuration work, only the style or 'severity' seems not to be applied.

I'm stuck here...

thanks

Solution

  • It seems that Tailwind presets are still actively being developed. The most sensible thing to do at the moment is to manually enter the Toast PT Options values in the "PASS THROUGH" tab at https://primevue.org/toast/

    Example:

    /**
 * presets/.../toast/index.js
 */
export default {
    root: ({ props }) => ({
        class: [
            //Size and Shape
            'w-96 rounded-md',

            // Positioning
            { '-translate-x-2/4': props.position == 'top-center' || props.position == 'bottom-center' }
        ]
    }),
    message: ({ props }) => ({
        class: [
            'mb-4 rounded-md w-full',
            'border border-transparent',
            'backdrop-blur-[10px] shadow-md',

            // Colors
            {
                'bg-blue-50/90 dark:bg-blue-500/20': props.message.severity == 'info',
                'bg-green-50/90 dark:bg-green-500/20': props.message.severity == 'success',
                'bg-surface-50 dark:bg-surface-800': props.message.severity == 'secondary',
                'bg-orange-50/90 dark:bg-orange-500/20': props.message.severity == 'warn',
                'bg-red-50/90 dark:bg-red-500/20': props.message.severity == 'error',
                'bg-surface-950 dark:bg-surface-0': props.message.severity == 'contrast'
            },
            {
                'border-blue-200 dark:border-blue-500/20': props.message.severity == 'info',
                'border-green-200 dark:border-green-500/20': props.message.severity == 'success',
                'border-surface-300 dark:border-surface-500/20': props.message.severity == 'secondary',
                'border-orange-200 dark:border-orange-500/20': props.message.severity == 'warn',
                'border-red-200 dark:border-red-500/20': props.message.severity == 'error',
                'border-surface-950 dark:border-surface-0': props.message.severity == 'contrast'
            },
            {
                'text-blue-700 dark:text-blue-300': props.message.severity == 'info',
                'text-green-700 dark:text-green-300': props.message.severity == 'success',
                'text-surface-700 dark:text-surface-300': props.message.severity == 'secondary',
                'text-orange-700 dark:text-orange-300': props.message.severity == 'warn',
                'text-red-700 dark:text-red-300': props.message.severity == 'error',
                'text-surface-0 dark:text-surface-950': props.message.severity == 'contrast'
            }
        ]
    }),
    messageContent: ({ props }) => ({
        class: [
            'flex p-3',
            {
                'items-start': props.message.summary,
                'items-center': !props.message.summary
            }
        ]
    }),
    messageIcon: ({ props }) => ({
        class: [
            // Sizing and Spacing
            props.message.severity === 'contrast' || props.message.severity === 'secondary' ? 'w-0' : 'w-[1.125rem] h-[1.125rem] mr-2',
            'text-lg leading-[normal]'
        ]
    }),
    messageText: {
        class: [
            // Font and Text
            'text-base leading-[normal]',
            'ml-2',
            'flex-1'
        ]
    },
    summary: {
        class: 'font-medium block'
    },
    detail: ({ props }) => ({
        class: ['block', 'text-sm', props.message.severity === 'contrast' ? 'text-surface-0 dark:text-surface-950' : 'text-surface-700 dark:text-surface-0', { 'mt-2': props.message.summary }]
    }),
    closebutton: ({ props }) => ({
        class: [
            // Flexbox
            'flex items-center justify-center',

            // Size
            'w-7 h-7',

            // Spacing and Misc
            'ml-auto  relative',

            // Shape
            'rounded-full',

            // Colors
            'bg-transparent',

            // Transitions
            'transition duration-200 ease-in-out',

            // States
            'hover:bg-surface-0/30 dark:hover:bg-[rgba(255,255,255,0.03)]',
            'focus:outline-none focus:outline-offset-0 focus:ring-1',
            {
                'focus:ring-blue-500 dark:focus:ring-blue-400': props.severity == 'info',
                'focus:ring-green-500 dark:focus:ring-green-400': props.severity == 'success',
                'focus:ring-surface-500 dark:focus:ring-surface-400': props.severity == 'secondary',
                'focus:ring-orange-500 dark:focus:ring-orange-400': props.severity == 'warn',
                'focus:ring-red-500 dark:focus:ring-red-4000': props.severity == 'error',
                'focus:ring-surface-0 dark:focus:ring-surface-950': props.severity == 'contrast'
            },

            // Misc
            'overflow-hidden'
        ]
    }),
    transition: {
        enterFromClass: 'opacity-0 translate-y-2/4',
        enterActiveClass: 'transition-[transform,opacity] duration-300',
        leaveFromClass: 'max-h-[1000px]',
        leaveActiveClass: '!transition-[max-height_.45s_cubic-bezier(0,1,0,1),opacity_.3s,margin-bottom_.3s] overflow-hidden',
        leaveToClass: 'max-h-0 opacity-0 mb-0'
    }
};

    Happy coding...