CODEWITHSUNDEEP
next.jscomponentstailwind-css
Steph
Steph

Reputation: 503

Tailwind grid-cols not working in production with Next

I have a Next project, repo here: https://github.com/DoctorSte/remoteOS

I have a Columns component that has a class called grid-cols-[x] where X is a prop.

export const Columns = ({
  children,
  columns,
  border,
  background,
  align,
  ...rest
}) => {
  return (
    <section
      className={`grid  md:grid-cols-${columns} grid-cols-1 items-${align} border-t-${border} ${background} gap-4 px-10 py-10 lg:px-48 w-full `}
      {...rest}
    >
      {children}
    </section>
  );
};

Locally it shows up ok but in production the column structure brakes. On inspection, the section has 'grid-cols-4' as a class but appears as single column. Any idea what may be causing this?

Upvotes: 1

Views: 3151

Answers (1)

Sean W
Sean W

Reputation: 6648

You can't string concatenate the names or tailwind /postcss will not pick them up during the build process - the classes won't get added to the build.

 className={`grid  ${columns === 4 ? 'md:grid-cols-4 sm:grid-cols-2': ''}`}

You'd have to evaluate how your dynamic classes are generated to see if there is a way to do it inline with the whole name (maybe just store the whole className).

Alternatively - you can add css that doesn't get purged by tailwind. See my other post on a similar but slightly different issue.

Upvotes: 7

Related Questions