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:
Code stack you are integrating Builder with:
NextJS, Tailwind CSS
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.
Hi Aziz,
Thank you for responding. I have included my Tailwind config below:
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')],
}
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.
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:
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'
},
],
});```worth adding the path for the TailwindProduct.jsx explicitly to the purge content list,
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.
Hi Aziz,
No changes after adding that line. Here is a link to the Github repo:
https://github.com/northrn/nextjs-builder
Thanks again.
Just bumping this. I’ve tried everything and nothing works…
@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
> Build error occurred
Error: Store is not active or not configured for API access
type: 'Error',
status: 400,
code: 'API_ACCESS'
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
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.
Just bumping this one more time…