Next.js Discord

Discord Forum

The data I pull via API is corrupted with tailwindcss

Unanswered
miracim posted this in #help-forum
Open in Discord
miracimOP
/app/page.tsx

import React from 'react';
import { getPages } from '@/app/(web)/api/services/CmsPagesServices/cmsPagesService';
const Page = async () => {
  const pages = await getPages();
  const targetId = '21a8d557-0208-43ac-af64-7a08c016651a';
  const HomePage = pages?.find((page) => page.cmsPageTypeId === targetId);

  return (
    <>
      {HomePage?.longDescription && (
        <div dangerouslySetInnerHTML={{ __html: HomePage?.longDescription }} />
      )}
    </>
  );
};

export default Page;


I pull the data successfully every time, the api returns me an html. in a string. i print it. most of the time the tailwindcss codes in this html are broken, it would be good to specify that no code is missing. for example xs:hidden does not work but the normal hidden class works. there are too many such nonsense things. Do you have any idea, can you please help me what can I do?

26 Replies

gabbagool
so the way the tailwind JIT compiler works is that it must know at build time what classes are in use
because it trims out the ones that aren't used
miracimOP
what should i do for this? because i have a tailwind config file i need to use it. using cdn doesn't seem like it would be very good
gabbagool
so possibly the best way to do this may not be with tailwind and instead just using inline styles
miracimOP
Won't it reduce performance too much?
this may also be an option
if you're willing to manually populate the safelist/do a regex pattern for classes you may be expecting
@miracim Won't it reduce performance too much?
gabbagool
i dont think so
miracimOP
If this will solve my problem I will do this, I will add all classes to the safe list with regex
gabbagool
what cms generates the html with tailwind classes?
@miracim If this will solve my problem I will do this, I will add all classes to the safe list with regex
gabbagool
see this on the other hand could cause some performance issues (maybe only a little) but be mindful this means you'll be increasing the size of your built css file
miracimOP
There is no cms. I post the data with an editor (ck editor 4) in the admin panel and get it from my page with get.
gabbagool
so maybe do a check before and after if performance is top of mind
or another option may be to use components within whatever your editor returns that map to react components
because then you can predefine certain styles you can use in the ck editor (not sure it has components because ive never heard of it, but it could be an option)
and solves the problem with the tailwind jit
up to you
miracimOP
What you are talking about here is to make htmli compatible with nextjs?

For example, replacing the next img element in html with next/image? Do I understand correctly?
gabbagool
hm not exactly, what i was proposing was changing the data that comes in from ck editor to be json instead of html, and then corresponding json to specific components

however i just looked into ck editor, and it seems you can't really do that
so i reckon the safelist thing is probably best
miracimOP
I got it, thank you, yes unfortunately it only gives html. I applied what you said but we have a much bigger problem.

the safelist value I added:
safelist: [{ pattern: /./ }],


The problem is that I don't have this problem in development mode right now, but when I deploy the next build or vercele, it takes more than 15 20 minutes and I still haven't got any results. so there is no result. I can't build it takes too long.
miracimOP
@gabbagool
maybe only do a safelist of only the classes you need
i.e. like text-* or something