How to use PrimeVue blocks with PrimeVue unstyled tailwind lara preset

[sumant4ssm]

I am planning to purchase PrimeVue blocks, but I am am confused with the free code snippet. I looked at the sign-in block

<div class="surface-card p-4 shadow-2 border-round w-full lg:w-6">
   <div class="text-center mb-5">
       <img src="/images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-3" />
       <div class="text-900 text-3xl font-medium mb-3">Welcome Back</div>
       <span class="text-600 font-medium line-height-3">Don't have an account?</span>
       <a class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Create today!</a>
   </div>

   <div>
       <label for="email1" class="block text-900 font-medium mb-2">Email</label>
       <InputText id="email1" type="text" placeholder="Email address" class="w-full mb-3" />

       <label for="password1" class="block text-900 font-medium mb-2">Password</label>
       <InputText id="password1" type="password" placeholder="Password" class="w-full mb-3" />

       <div class="flex align-items-center justify-content-between mb-6">
           <div class="flex align-items-center">
               <Checkbox id="rememberme1" :binary="true" v-model="checked1" class="mr-2"></Checkbox>
               <label for="rememberme1">Remember me</label>
           </div>
           <a class="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">Forgot password?</a>
       </div>

       <Button label="Sign In" icon="pi pi-user" class="w-full"></Button>
   </div>
</div>

My setup includes - PrimeVue unstyled with lara presets, and these classes don't exist in this preset. How to use these with my current setup? Is there a video which explains?

[frankmichel]

@sumant4ssm It is all very confusing indeed. It looks like PrimeVue is switching from PrimeFlex (their own CSS utility framework) to Tailwindcss (see https://tailwind.primevue.org/). On Twitter they announced that PrimeBlocks will be rewritten to use Tailwind as well. But no status or any news on how far they are or when it will be available.

The problem you are facing is, that you are using the newest PrimeVue with Tailwind. But that does not include the PrimeFlex classes which are in turn still needed for the current version of PrimeBlocks.

At this moment, the whole ecosystem of PrimeVue seems to be in a transition to Tailwindcss. Which is great news, but very badly communicated and/or documented. For me, this is a reason to wait using this framework for any application until it is stable across the entire ecosystem.