gluestack

gluestack Logogluestack

A few component have no css classes in html output

dirk3904 posted this in #support
Open in Discord
Avatar
dirk3904OP
Hi, just asking in general, what can I check if a few Gluestack components are missing tailwind css classes in the html output? I have a working react-native-web monorepo setup with Vite. Everything works fine, but the progress component for example is not visible because all tailwind classes are missing.

For example this html output. You see in most cases everything is fine, but the progress component has no tailwind classes.

<div class="flex flex-col relative z-0 box-border border-0 list-none min-w-0 min-h-0 bg-transparent items-stretch m-0 p-0 text-decoration-none shadow w-[99%] h-[70px] rounded-[5px] border-l-[8px] mb-[5px] py-[1px] px-[5px]" style="border-left-color: rgb(173, 221, 231);">
   <div tabindex="0" class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73">
      <div class="flex flex-col relative z-0 box-border border-0 list-none min-w-0 bg-transparent items-stretch m-0 p-0 text-decoration-none min-h-[100%] justify-evenly">
         <span class="font-ibmplex tracking-sm my-0 bg-transparent border-0 box-border display-inline list-none margin-0 padding-0 position-relative text-start no-underline whitespace-pre-wrap word-wrap-break-word text-primary-500 text-[17px] leading-[22px] font-[700]">LoremIpsum.pdf</span><span class="font-ibmplex tracking-sm my-0 bg-transparent border-0 box-border display-inline list-none margin-0 padding-0 position-relative text-start no-underline whitespace-pre-wrap word-wrap-break-word text-base text-primary-500 undefined">48%</span>
         <div aria-orientation="horizontal" role="progressbar" aria-valuemax="100" aria-valuemin="0" aria-valuenow="48" aria-valuetext="48%" class="css-view-175oi2r">
            <div class="css-view-175oi2r" style="width: 48%; height: 100%;"></div>
         </div>
      </div>
   </div>
</div>


All components were installed with npx gluestack-ui@latest add --all

1 Reply