Components styling

Developing with Prismic
1

I am currently confused on how to style the components based on the starters for nextjs
Could someone let me know where the styling (font size, color, etc) for the multipage starter is defined ?

3

Hello @cptflammin, thanks for reaching out.
Styling and all CSS of your content are managed on the project's front-end.
Add more styling in the globals.css file that's imported in _app.js

4

Ok, thanks for the feedback, I found out some some heading.js code in multilanguage starter, that where the component related styling was. Maybe a few lines on styling in frontend in the doc would be appreciate, or did I miss something ?

5

Hi there ! I am puzzled, I cannot find how styling is applied in by example in the nextjs-starter-prismic-multi-page. Looking at component code below I see tailwind code for layout stuff, but not about text styling. Where is the title in (PrismicRichText field={slice.primary.text}) size, color and weight defined for below component ?

TextWithImage.js

import * as prismicH from "@prismicio/helpers";
import { PrismicRichText } from "@prismicio/react";
import { PrismicNextImage } from "@prismicio/next";

import { Bounded } from "../../components/Bounded";

const TextWithImage = ({ slice }) => {
  const image = slice.primary.image;

  return (
    <Bounded as="section" className="bg-white">
      <div className="grid grid-cols-1 items-center gap-8 md:grid-cols-2">
        <div>
          <PrismicRichText field={slice.primary.text} />
        </div>
        <div>
          {prismicH.isFilled.image(image) && (
            <div className="bg-gray-100">
              <PrismicNextImage field={image} layout="responsive" />
            </div>
          )}
        </div>
      </div>
    </Bounded>
  );
};

export default TextWithImage

;

6

The starters are created to be customizable, so you can modify the styles of the components to your liking. I'm going to add a note to the backlog to mention this on the docs.
Thanks for the feedback!