# Published Page Not Rendering Correctly

**URL:** <https://forum.builder.io/t/published-page-not-rendering-correctly/5443>\
**Category:** Technical Questions\
**Created:** [April 25, 2024, 1:09pm UTC](https://forum.builder.io/t/published-page-not-rendering-correctly/5443 "2024-04-25T13:09:23Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![spm922](https://avatars.discourse-cdn.com/v4/letter/s/50afbb/32.png) [@spm922](https://forum.builder.io/u/spm922)\
**Post date:** [April 25, 2024, 1:09pm UTC](https://forum.builder.io/t/published-page-not-rendering-correctly/5443/1 "2024-04-25T13:09:23Z")

</div>

Our published page is not rendering properly but looks fine when previewed and from the builder editor.

**Builder content link**

> **[Builder.io: Visual Development Platform](https://builder.io/content/b57ddf03d5f44aa0aa833a0dbef08911)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually..

**Builder public api key**  
67d113c4afd947a7aa749b203e99ace6

**Screenshots or video link**  
https://www.loom.com/embed/5f9ba5c718a541acb73c94c689e8bfbb?sid=7f26bcb9-b554-4ba0-bf10-e5c3f5bfc348

**Code stack you are integrating Builder with**  
NextJS

**Reproducible code example**  
_If you are having integration errors, please link to codesandbox or copy and paste your problematic code here. The more detail the better!_

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [April 25, 2024, 1:38pm UTC](https://forum.builder.io/t/published-page-not-rendering-correctly/5443/2 "2024-04-25T13:38:38Z")

</div>

Hello @spm922,

I think the publish page is not updating and it’s showing an older version, the testimonials section supposed to be a symbol, however, on the live page, it is still a section block which is incorrect.

 ![Screenshot 2024-04-25 at 7.06.50 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/d/d322510259fd9a44116cc1747b5f0e999384bf1e.jpeg)

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [April 25, 2024, 1:40pm UTC](https://forum.builder.io/t/published-page-not-rendering-correctly/5443/3 "2024-04-25T13:40:40Z")

</div>

Hello @spm922,

Are other changes reflecting on the live page?

---

<div class="post-metadata">

**Author:** ![spm922](https://avatars.discourse-cdn.com/v4/letter/s/50afbb/32.png) [@spm922](https://forum.builder.io/u/spm922)\
**Post date:** [April 25, 2024, 1:49pm UTC](https://forum.builder.io/t/published-page-not-rendering-correctly/5443/4 "2024-04-25T13:49:19Z")

</div>

I just added our _How It Works_ component and redeployed the site on Vercel. The testimonial, learn more, FAQ, and footer are still messed up on the live page but look fine in editor and preview.

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [April 25, 2024, 2:09pm UTC](https://forum.builder.io/t/published-page-not-rendering-correctly/5443/5 "2024-04-25T14:09:36Z")

</div>

Hello @spm922

https://www.loom.com/embed/9e4b2b8bed5546fe941a2a460377b83c?sid=0a5cb224-075e-47af-8413-ddb233db12e9

---

<div class="post-metadata">

**Author:** ![spm922](https://avatars.discourse-cdn.com/v4/letter/s/50afbb/32.png) [@spm922](https://forum.builder.io/u/spm922)\
**Post date:** [April 25, 2024, 2:18pm UTC](https://forum.builder.io/t/published-page-not-rendering-correctly/5443/6 "2024-04-25T14:18:10Z")

</div>

Thank you for the thorough review! I published the text on the page and it loads as expected.

 ![Screenshot 2024-04-25 at 10.16.59 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/7/7f9f53ca7de88251c1da68b4e903a01b579c1382.jpeg)

Our SDK version is

```auto
   "@builder.io/react": "^3.2.6"

```

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [April 25, 2024, 2:19pm UTC](https://forum.builder.io/t/published-page-not-rendering-correctly/5443/7 "2024-04-25T14:19:06Z")

</div>

Hello @spm922,

Can you share your integration code for the page model?

---

<div class="post-metadata">

**Author:** ![spm922](https://avatars.discourse-cdn.com/v4/letter/s/50afbb/32.png) [@spm922](https://forum.builder.io/u/spm922)\
**Post date:** [April 25, 2024, 3:15pm UTC](https://forum.builder.io/t/published-page-not-rendering-correctly/5443/8 "2024-04-25T15:15:07Z")

</div>

```auto
import type { GetStaticPropsContext, InferGetStaticPropsType } from "next";
import { useRouter } from "next/router";
import { BuilderComponent, Builder, builder } from "@builder.io/react";
import "@builder.io/widgets";
import Head from "next/head";
import { NextSeo } from "next-seo";
import { Navbar } from "../components/navbar";

// Builder Components
import "../components/builder-components/builder-action-feature";
import "../components/builder-components/builder-cta-image-left-centered";
import "../components/builder-components/builder-faq";
import "../components/builder-components/builder-footer";
import "../components/builder-components/builder-hero";
import "../components/builder-components/builder-open-graph";
import "../components/builder-components/builder-product-list";
import "../components/builder-components/builder-service-benefits";
import "../components/builder-components/builder-service-detail";
import "../components/builder-components/builder-testimonials";
import "../components/builder-components/builder-three-column-feature";
import "../components/builder-components/builder-three-column-lists";
import "../components/builder-components/structured-data/article";
import "../components/builder-components/structured-data/breadcrumb";
import "../components/builder-components/structured-data/job-posting";
import "../components/builder-components/structured-data/url-carousel";
import "../components/builder-components/structured-data/local-business";
import "../components/builder-components/builder-logo-clouds"
import "../components/builder-components/builder-three-column-feature-v2"
import "../components/builder-components/builder-cta-simple-center"
import "../components/builder-components/builder-how-it-works"

export async function getStaticProps({
  params,
}: GetStaticPropsContext<{ page: string[] }>) {
  const page =
    (await builder
      .get("page", {
        userAttributes: {
          urlPath: "/" + (params?.page?.join("/") || ""),
        },
      })
      .toPromise()) || null;

  return {
    props: {
      page
    },
    revalidate: 5,
    notFound: !page,
  };
}

export const getStaticPaths = async () => {
  const results = await builder.getAll("page", {
    fields: "data.url",
    key: "all-pages",
    limit: 200,
    options: {
      noTargeting: true,
    },
  });

  return {
    paths: results.map((page) => `${page.data?.url}`),
    fallback: false,
  };
};

export default function Page({
  page,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  const router = useRouter();
  const isLive = !Builder.isEditing && !Builder.isPreviewing;

  return (!page && isLive) || router.isFallback ? (
    <></>
  ) : (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta charSet="utf-8" />
      </Head>

      <NextSeo
        title={page.data.title}
        description={page.data.description}
        canonical=""
        openGraph={{
          type: "website",
          url: page.data.url,
          title: page.data.title,
          description: page.data.description,
          images: [
            {
              url: page.data.image,
              width: 361,
              height: 361,
              alt: "TekDash",
              type: "image/jpeg",
            },
          ],
          site_name: "tekdash.com",
        }}
      />
      <Navbar />
      <BuilderComponent model="page" content={page} options={{ includeRefs: true }} key={router.asPath}/>
    </>
  );
}

```

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [April 25, 2024, 5:57pm UTC](https://forum.builder.io/t/published-page-not-rendering-correctly/5443/9 "2024-04-25T17:57:55Z")

</div>

Hello @spm922,

In your` builde.get` call and `BuilderComponent` can you add the `enrich: true` option

```auto
const page =
    (await builder
      .get("page", {
        userAttributes: {
          urlPath: "/" + (params?.page?.join("/") || ""),
        },
        options: { enrich: true },
        cachebust: true
      })
      .toPromise()) || null;

```

```auto
      <BuilderComponent model="page" content={page} options={{ includeRefs: true, enrich: true }} key={router.asPath}/>

```

Let us know how that works for you!

Thank you!

---

<div class="post-metadata">

**Author:** ![spm922](https://avatars.discourse-cdn.com/v4/letter/s/50afbb/32.png) [@spm922](https://forum.builder.io/u/spm922)\
**Post date:** [April 27, 2024, 2:17pm UTC](https://forum.builder.io/t/published-page-not-rendering-correctly/5443/10 "2024-04-27T14:17:40Z")

</div>

Hi @manish-sharma,

This makes no difference for me.

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [April 29, 2024, 1:52pm UTC](https://forum.builder.io/t/published-page-not-rendering-correctly/5443/11 "2024-04-29T13:52:06Z")

</div>

Hello @spm922,

Could you confirm which builder SDK version are you using?

---

<div class="post-metadata">

**Author:** ![spm922](https://avatars.discourse-cdn.com/v4/letter/s/50afbb/32.png) [@spm922](https://forum.builder.io/u/spm922)\
**Post date:** [April 29, 2024, 11:27pm UTC](https://forum.builder.io/t/published-page-not-rendering-correctly/5443/12 "2024-04-29T23:27:47Z")

</div>

@manish-sharma

We are running SDK version:

> [@spm922](#):
>
> ` "@builder.io/react": "^3.2.6"`

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [April 30, 2024, 11:12am UTC](https://forum.builder.io/t/published-page-not-rendering-correctly/5443/13 "2024-04-30T11:12:37Z")

</div>

Hello @spm922,

After further investigation, we’ve identified the actual issue causing the layout to break. It appears that some of the Tailwind classes are not being applied to your custom components, such as `md:grid md:grid-cols-3 md:gap-8`. These Tailwind classes are not applied to the footer custom component, and some of the applied style attributes are also missing.

Currently, I’m unable to fix the issue as the style tab is not available when editing symbols. Is this something you have disabled intentionally?

---

<div class="post-metadata">

**Author:** ![spm922](https://avatars.discourse-cdn.com/v4/letter/s/50afbb/32.png) [@spm922](https://forum.builder.io/u/spm922)\
**Post date:** [April 30, 2024, 11:53am UTC](https://forum.builder.io/t/published-page-not-rendering-correctly/5443/14 "2024-04-30T11:53:58Z")

</div>

@manish-sharma Very interesting. No the style tab is not intentionally disabled. All of the styling is handled through the custom component. We rarely use the styling features in Builder.

Just to note the Tailwind classes you mentioned are present in the component code, but I see they are missing in the live page.

 ![Screenshot 2024-04-30 at 7.50.59 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/c/ce2646efafd0ad9fef9ef5b59b4f3595370188f7.png)

---

<div class="post-metadata">

**Author:** ![spm922](https://avatars.discourse-cdn.com/v4/letter/s/50afbb/32.png) [@spm922](https://forum.builder.io/u/spm922)\
**Post date:** [April 30, 2024, 11:55am UTC](https://forum.builder.io/t/published-page-not-rendering-correctly/5443/15 "2024-04-30T11:55:58Z")

</div>

Components-only mode is enabled for our symbol model. Perhaps that is why the styling menu is missing. This is intentional.

 ![Screenshot 2024-04-30 at 7.55.49 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/a/abc37090444f7bae7fc25c261ae3ff8075be851e.png)

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [April 30, 2024, 11:57am UTC](https://forum.builder.io/t/published-page-not-rendering-correctly/5443/16 "2024-04-30T11:57:58Z")

</div>

Hello @spm922,

If it’s okay can we disable custom component-only mode for some troubleshooting? Mainly to verify the styles being applied from builder.

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [April 30, 2024, 12:02pm UTC](https://forum.builder.io/t/published-page-not-rendering-correctly/5443/17 "2024-04-30T12:02:46Z")

</div>

Hello @spm922,

For the issue with tailwind classes missing, this seems to be a known issue, and you may find solution at the following forum post link [Grid or column view - column-span - #9 by radikris](https://forum.builder.io/t/grid-or-column-view-column-span/1640/9)

---

<div class="post-metadata">

**Author:** ![spm922](https://avatars.discourse-cdn.com/v4/letter/s/50afbb/32.png) [@spm922](https://forum.builder.io/u/spm922)\
**Post date:** [May 2, 2024, 9:41pm UTC](https://forum.builder.io/t/published-page-not-rendering-correctly/5443/18 "2024-05-02T21:41:11Z")

</div>

@manish-sharma I disabled component only mode. The solution you linked is not applicable to our use case. The tailwind classes are statically defined within our component code. We do not pass in any variables.

It appears that the tailwind class is being stripped out on the live page. The footer component works fine on other pages, for example [New Ethernet Cable Installation | On-Site | TekDash](https://www.tekdash.com/tech-support/new-ethernet-cable-installation).

---

<div class="post-metadata">

**Author:** ![spm922](https://avatars.discourse-cdn.com/v4/letter/s/50afbb/32.png) [@spm922](https://forum.builder.io/u/spm922)\
**Post date:** [May 7, 2024, 12:23am UTC](https://forum.builder.io/t/published-page-not-rendering-correctly/5443/19 "2024-05-07T00:23:02Z")

</div>

Hi Manish - Just wanted to follow up here. I put together another [video](https://www.loom.com/share/f98a283fb72944c6b6791fd5d376362f?sid=f3941b40-8e6e-4d18-9b65-f8ecb8409ffb) trying to explain what I’m seeing. As far as I can tell, the tailwind classes are not being respected on builder hosted components. Do you have any suggestions on how we fix this?