primefaces / primevue-tailwind

PrimeVue Components Styled with Tailwind CSS
https://tailwind.primevue.org
MIT License
624 stars 75 forks source link

Accordion missing transition #317

Closed sergeydus closed 1 month ago

sergeydus commented 2 months ago

When opening/closing an component, there is supposed to be a transition animation

example: https://stackblitz.com/edit/4q9e8a?file=src%2Fmain.js

this is a fork from the tailwind accordion page, for some reason it works fine on the website, but on blitzstack it the transition doesn't work, (locally doesn't work aswell)

version: 4.0.5

atakantepe commented 2 months ago

Hi, it seems like you might be missing the tailwindcss-primeui plugin. The animation classes are added using this plugin.

/** @type {import('tailwindcss').Config} */
const primeui = require('tailwindcss-primeui');

module.exports = {
    darkMode: ['selector', '[class*="p-dark"]'],
    content: ['./presets/**/**/*.{js,vue,ts}', './components/**/*.{js,vue,ts}', './doc/**/*.{js,vue,ts}', './layouts/**/*.vue', './pages/**/*.vue', './plugins/**/*.{js,ts}', './nuxt.config.{js,ts}', './app.vue', './error.vue'],
    plugins: [primeui],
    theme: {
        screens: {
            sm: '576px',
            md: '768px',
            lg: '992px',
            xl: '1200px',
            '2xl': '1920px'
        }
    }
};
atakantepe commented 2 months ago

If this is not the solution, you can re-open this issue

sergeydus commented 1 month ago

@atakantepe maybe im missing something, but in the example I provided the plugin IS being used. this is literally the same code used in the stackblitz examples in https://tailwind.primevue.org/accordion/

however, there's a difference, I have // import StepperPanel from 'primevue/stepperpanel'; commented out

how do I reopen the issue?

ITSFerroli commented 1 month ago

same

cagataycivici commented 1 month ago

As of v4.1.1, the new Tailwind styles have been rewritten using the preprocessor approach with @apply instead of pass-through. As a result this issue is not relevant any more.

New Website is live.