Unable to style the div on simulator only on dev tools

Developing with Prismic
1

Hi everyone,

I'm currently styling my Hero slice via simulator. I'm trying to get a very basic heading to be overlayed on my image. Using position relative then position absolute the expected behavior should work. however nothing changes in simulator so when I tried rendering it on local host i played around with the dev tools by clearing out the div with the position absolute and manually added position absolute, top-20, left-42 and it worked! How come it won't in my editor or simulator? see code below:

  <div className="relative">
    <div className="absolute top-[20rem] left-[42rem]">
      <PrismicRichText
        field={slice.primary.hero_title}
        components={components}
      />
    </div>
    <PrismicNextImage field={slice.primary.hero_image} />

);
};

export default Hero;

any tips are much appreciated as I'm just starting out in Prismic!!

3

Hi Odelia,

Does your tailwind config include all the content folders described in our sample projects?

Thanks.

4

Hey Phil,

Thanks so much! This solved my issue. I didn't have src/slices/etc. added to module.exports. big life saver!

1 Like