Stars appearing vertically

[HarkiratShopism1]

I am using tailwind css in my project and after I installed tailwind I am experiencing a vertical alignment of stars

Can someone help me sort this out.

[baydisng13]

I am also facing the same issue in my Next.js and Tailwind projects. when I pass the props emptyClassName="flex" no change but when I pass the props emptyStyle={{display:"flex"}} will render horizontally but not function as it should be Specifically, even if I select multiple stars, only the first star shows as filled. See the screenshot below for an example where I selected 4 stars but only the first star is filled:

[henaorth16]

Make the wrapper div flex flex-col h-auto

[HarkiratShopism1]

Make the wrapper div flex flex-col h-auto I tried to implement the above mentioned suggestion the stars are aligned horizontally after implementing but when I try to select multiple stars, only the first star shows as filled.

[Tallal64]

@baydisng13 pass the prop "SVGclassName={inline-block}" instead of "emptyStyle={{display:"flex"}}" and hopefully it will fix the problem.

[m-lyon]

@Tallal64 this does not resolve the issue for me. Instead, i set SVGstyle={{ display: 'inline-block' }} which resolved the issue.

[undermad]

Hey, That works for me

<Rating
            SVGclassName={'nline-block'}
            initialValue={4}
            readonly={true}/>

[zaadevofc]

I am also facing the same issue in my Next.js and Tailwind projects. when I pass the props emptyClassName="flex" no change but when I pass the props emptyStyle={{display:"flex"}} will render horizontally but not function as it should be Specifically, even if I select multiple stars, only the first star shows as filled. See the screenshot below for an example where I selected 4 stars but only the first star is filled:

thanks its work for me