How to use daisy ui css with builder.io

Technical Questions
1

BuilderApiKey:6024bd3981504c1d9cae4df4050a8caa
Hi @all ,
when i am using daisy ui for hero slider it’s not supporting classes .But when i am using material ui it’s working …so upper is my apikey have you checked and tell me what is the mistake…

This is Carousel component which i have done by daisy ui

import React from ‘react’;
import Image from ‘next/image’;
import Carousel_Image1 from ‘…/…/public/poc_images/CourserImage.png’
import Corousel_Image2 from “…/…/public/poc_images/CourserImage2.png”

const Carousel = () => {
return (

  <div className="carousel w-full">
    <div id="slide1" className="carousel-item relative w-full">

      <Image src={Carousel_Image1} alt='hero_Image' className=' w-full h-[500px] object-cover ' />

      <div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
        <a href="#slide4" className="btn btn-circle">❮</a>
        <a href="#slide2" className="btn btn-circle">❯</a>
      </div>
      <div className=' absolute top-44 left-44'>
        <span className=' block font-extrabold text-5xl'>GET CHANGED.</span>
        <span className=' block font-extrabold text-5xl'>STAY WARM.</span>
        <span className=' block'>Outdoor gear to keep you going.Any</span>
        <span> weather,anywhere</span>

        <button className="btn-lg btn-wide  absolute top-40 right-28 bg-red-700 text-white rounded-md">Shop Now</button>
      </div>
    </div>
    <div id="slide2" className="carousel-item relative w-full">
      <Image src={Corousel_Image2} alt='hero_Image' className=' w-full h-[500px] object-cover' />

      <div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
        <a href="#slide1" className="btn btn-circle">❮</a>
        <a href="#slide3" className="btn btn-circle">❯</a>
      </div>
    </div>
  </div>

)
}

export default Carousel

// builder registry

Builder.registerComponent(Carousel, {
name: “Carousel”,
});

i want to upload images and title from builder io

when i am using this components then it is working but when i am using this components after builderio register it’s breaking…can anyone suggest me what’s fault from my side???

image
image1900×940 176 KB

I have uploaded images like this it is breaking …but this is working in browser with next js but when i am using builderio and drag and drop it’s CSS classes not working,it is visible like images what i have uploaded

image
image1824×583 73.1 KB

see in Elements Carousel-item classes is not coming (this done by builderio)

image
image1858×337 45.6 KB

when i am doing by daisy ui and next js upper classes is comming

2

Hi anyone can help me for this css ??why it’s not taking daisy ui classes

3

Hello @Soumyaranjan,

Daisy UI is based on Tailwind CSS classes, and we suspect the issue could be related to the dynamic variables in the Tailwind class. To resolve this issue, you may find assistance at the following link:

4

what you sent me in that example they got classes but after using daisy ui i am not getting classes that is the problem …ok i am going through that link and checking…