# Custom component not rendering properly?

**URL:** https://forum.builder.io/t/custom-component-not-rendering-properly/1339
**Category:** Technical Questions
**Tags:** visual-editor, styling, react, nextjs
**Created:** [November 14, 2021, 8:42pm UTC](https://forum.builder.io/t/custom-component-not-rendering-properly/1339 "2021-11-14T20:42:31Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![northrnx](https://avatars.discourse-cdn.com/v4/letter/n/e56c9b/32.png) [@northrnx](https://forum.builder.io/u/northrnx)
#### Post date: [November 14, 2021, 8:42pm UTC](https://forum.builder.io/t/custom-component-not-rendering-properly/1339/1 "2021-11-14T20:42:32Z")

</div>

Hi there,

I am importing a custom component to my builder page and it is not rendering the Tailwind CSS styles. It is just rendering as plain HTML. I am working in a NextJS project that it setup with Tailwind CSS. I am not sure what the issue is and any assistance is greatly appreciated.

Builder content link:

> **[Builder.io: Drag and drop page builder and CMS](https://builder.io/content/9667547d56c44f9ca26a2e44cb1b2bd9)**
>
> Build and optimize digital experiences for any tech stack, visually.

Code stack you are integrating Builder with:  
NextJS, Tailwind CSS

 ![Screen Shot 2021-11-14 at 3.41.32 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/558fa0d0c7c24d47b3fb81ed057dab818cdc309d.jpeg)

---

<div class="post-metadata">

### Author: ![aziz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/aziz/32/2551_2.png) [@aziz](https://forum.builder.io/u/aziz)
#### Post date: [November 15, 2021, 4:17am UTC](https://forum.builder.io/t/custom-component-not-rendering-properly/1339/2 "2021-11-15T04:17:39Z")

</div>

Please share your tailwind config, I think this has to do with the purge config, . If your custom components are not part of the `purge` paths configured for tailwind, then you need to update the paths to reflect this.

> [@northrnx](#):
>
> I am importing a custom component to my builder page and it is not rendering the Tailwind CSS styles

---

<div class="post-metadata">

### Author: ![northrnx](https://avatars.discourse-cdn.com/v4/letter/n/e56c9b/32.png) [@northrnx](https://forum.builder.io/u/northrnx)
#### Post date: [November 15, 2021, 5:39am UTC](https://forum.builder.io/t/custom-component-not-rendering-properly/1339/3 "2021-11-15T05:39:10Z")

</div>

Hi Aziz,

Thank you for responding. I have included my Tailwind config below:

```auto
module.exports = {
  future: {
    purgeLayersByDefault: true,
    applyComplexClasses: true,
  },
  purge: {
    content: [
      './pages/**/*.{js,ts,jsx,tsx}',
      './blocks/**/*.{js,ts,jsx,tsx}',
      './components/**/*.{js,ts,jsx,tsx}',
    ],
  },
  theme: {
    extend: {
      maxWidth: {
        '8xl': '1920px',
      },
      colors: {
        primary: 'var(--primary)',
        'primary-2': 'var(--primary-2)',
        secondary: 'var(--secondary)',
        'secondary-2': 'var(--secondary-2)',
        hover: 'var(--hover)',
        'hover-1': 'var(--hover-1)',
        'hover-2': 'var(--hover-2)',
        'accents-0': 'var(--accents-0)',
        'accents-1': 'var(--accents-1)',
        'accents-2': 'var(--accents-2)',
        'accents-3': 'var(--accents-3)',
        'accents-4': 'var(--accents-4)',
        'accents-5': 'var(--accents-5)',
        'accents-6': 'var(--accents-6)',
        'accents-7': 'var(--accents-7)',
        'accents-8': 'var(--accents-8)',
        'accents-9': 'var(--accents-9)',
        violet: 'var(--violet)',
        'violet-light': 'var(--violet-light)',
        pink: 'var(--pink)',
        cyan: 'var(--cyan)',
        blue: 'var(--blue)',
        green: 'var(--green)',
        red: 'var(--red)',
      },
      textColor: {
        base: 'var(--text-base)',
        primary: 'var(--text-primary)',
        secondary: 'var(--text-secondary)',
      },
      boxShadow: {
        'outline-2': '0 0 0 2px var(--accents-2)',
        magical:
          'rgba(0, 0, 0, 0.02) 0px 30px 30px, rgba(0, 0, 0, 0.03) 0px 0px 8px, rgba(0, 0, 0, 0.05) 0px 1px 0px',
      },
      lineHeight: {
        'extra-loose': '2.2',
      },
      scale: {
        120: '1.2',
      },
      gridTemplateRows: {
        '[auto,auto,1fr]': 'auto auto 1fr',
      },
    },
  },
  plugins: [require('@tailwindcss/ui'), require('@tailwindcss/aspect-ratio'), require('@tailwindcss/forms')],
}

```

---

<div class="post-metadata">

### Author: ![aziz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/aziz/32/2551_2.png) [@aziz](https://forum.builder.io/u/aziz)
#### Post date: [November 15, 2021, 7:23pm UTC](https://forum.builder.io/t/custom-component-not-rendering-properly/1339/4 "2021-11-15T19:23:33Z")

</div>

Is this where the custom component lives? also is this something that only happens on production environment? if adding that path for the custom component doesn’t solve this issue, please send a reproduction (repo on github or codesandbox ) and will look into this further.

> [@northrnx](#):
>
> ```auto
> './pages/**/*.{js,ts,jsx,tsx}',
> './blocks/**/*.{js,ts,jsx,tsx}',
> './components/**/*.{js,ts,jsx,tsx}',
> 
> ```

---

<div class="post-metadata">

### Author: ![northrnx](https://avatars.discourse-cdn.com/v4/letter/n/e56c9b/32.png) [@northrnx](https://forum.builder.io/u/northrnx)
#### Post date: [November 15, 2021, 10:08pm UTC](https://forum.builder.io/t/custom-component-not-rendering-properly/1339/5 "2021-11-15T22:08:34Z")

</div>

Hi Aziz,

Thanks again. The custom component is it’s own file in the /components directory called “TailwindProduct.jsx”. The code in that file is:

````auto
import { Builder } from "@builder.io/react";

const products = [
    {
      id: 1,
      name: 'Basic Tee',
      href: '#',
      imageSrc: 'https://tailwindui.com/img/ecommerce-images/product-page-01-related-product-01.jpg',
      imageAlt: "Front of men's Basic Tee in black.",
      price: '$35',
      color: 'Black',
    },
    // More products...
  ]
  
  export default function Example() {
    return (
      <div className="bg-white">
        <div className="max-w-2xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
          <h2 className="text-2xl font-extrabold tracking-tight text-gray-900">Customers also purchased</h2>
  
          <div className="mt-6 grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8">
            {products.map((product) => (
              <div key={product.id} className="group relative">
                <div className="w-full min-h-80 bg-gray-200 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
                  <img
                    src={product.imageSrc}
                    alt={product.imageAlt}
                    className="w-full h-full object-center object-cover lg:w-full lg:h-full"
                  />
                </div>
                <div className="mt-4 flex justify-between">
                  <div>
                    <h3 className="text-sm text-gray-700">
                      <a href={product.href}>
                        <span aria-hidden="true" className="absolute inset-0" />
                        {product.name}
                      </a>
                    </h3>
                    <p className="mt-1 text-sm text-gray-500">{product.color}</p>
                  </div>
                  <p className="text-sm font-medium text-gray-900">{product.price}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    )
  }
  

Builder.registerComponent(Example, {
    name: "Tailwind Product",
    inputs: [
      {
        name: "title",
        type: "text",
        defaultValue: 'I am a custom component!'
      },
      {
        name: "color",
        type: "color",
        defaultValue: 'black'
      },
    ],
  });```
````

---

<div class="post-metadata">

### Author: ![aziz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/aziz/32/2551_2.png) [@aziz](https://forum.builder.io/u/aziz)
#### Post date: [November 15, 2021, 10:55pm UTC](https://forum.builder.io/t/custom-component-not-rendering-properly/1339/6 "2021-11-15T22:55:59Z")

</div>

worth adding the path for the TailwindProduct.jsx explicitly to the purge content list,

```auto
  purge: {
    content: [
      './components/TailwindProduct.jsx',
      './pages/**/*.{js,ts,jsx,tsx}',
      './blocks/**/*.{js,ts,jsx,tsx}',
      './components/**/*.{js,ts,jsx,tsx}',
    ],
  },

```

If that didn’t fix it, please send minimal reproduction sandbox or repo and I can take a deeper look.

---

<div class="post-metadata">

### Author: ![northrnx](https://avatars.discourse-cdn.com/v4/letter/n/e56c9b/32.png) [@northrnx](https://forum.builder.io/u/northrnx)
#### Post date: [November 16, 2021, 6:14am UTC](https://forum.builder.io/t/custom-component-not-rendering-properly/1339/7 "2021-11-16T06:14:24Z")

</div>

Hi Aziz,

No changes after adding that line. Here is a link to the Github repo:

[https://github.com/northrn/nextjs-builder](https://github.com/northrn/nextjs-builder)

Thanks again.

---

<div class="post-metadata">

### Author: ![northrnx](https://avatars.discourse-cdn.com/v4/letter/n/e56c9b/32.png) [@northrnx](https://forum.builder.io/u/northrnx)
#### Post date: [November 18, 2021, 8:11pm UTC](https://forum.builder.io/t/custom-component-not-rendering-properly/1339/8 "2021-11-18T20:11:04Z")

</div>

Just bumping this. I’ve tried everything and nothing works…

---

<div class="post-metadata">

### Author: ![aziz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/aziz/32/2551_2.png) [@aziz](https://forum.builder.io/u/aziz)
#### Post date: [November 18, 2021, 10:35pm UTC](https://forum.builder.io/t/custom-component-not-rendering-properly/1339/9 "2021-11-18T22:35:59Z")

</div>

@northrnx I am not able to run the code from the github repo, there are some missing libraries, and when fixing them I’m currently stuck at this

```auto
> Build error occurred
Error: Store is not active or not configured for API access
  type: 'Error',
  status: 400,
  code: 'API_ACCESS'

```

---

<div class="post-metadata">

### Author: ![northrnx](https://avatars.discourse-cdn.com/v4/letter/n/e56c9b/32.png) [@northrnx](https://forum.builder.io/u/northrnx)
#### Post date: [November 18, 2021, 11:43pm UTC](https://forum.builder.io/t/custom-component-not-rendering-properly/1339/10 "2021-11-18T23:43:44Z")

</div>

Hi Aziz,

Yes that is a problem. This project is configured with Swell so I have my public API key and account details saved in order to run it. I figured that seeing the structure of the project and being able to view all the files would be helpful. I’m not sure how you’d be able to get it up and running without inputting your own Swell details

---

<div class="post-metadata">

### Author: ![northrnx](https://avatars.discourse-cdn.com/v4/letter/n/e56c9b/32.png) [@northrnx](https://forum.builder.io/u/northrnx)
#### Post date: [November 19, 2021, 8:57pm UTC](https://forum.builder.io/t/custom-component-not-rendering-properly/1339/11 "2021-11-19T20:57:14Z")

</div>

One other thing I’ve noticed: In the Chrome dev tools, the classes are being imported, however, the styles are just not rendering for whatever reason.

---

<div class="post-metadata">

### Author: ![northrnx](https://avatars.discourse-cdn.com/v4/letter/n/e56c9b/32.png) [@northrnx](https://forum.builder.io/u/northrnx)
#### Post date: [November 25, 2021, 8:19pm UTC](https://forum.builder.io/t/custom-component-not-rendering-properly/1339/12 "2021-11-25T20:19:20Z")

</div>

Just bumping this one more time…