Tailwind colors

Technical Questions
, ,
1

I am exploring the code generating feature, and am in general very impressed by what I see! But when exporting to Tailwind, it seems to reduce any color to the closest color from the standard Tailwind palette?

For example, I have imported a design from Figma. The background color of an element is set to Brand-25. When exporting to CSS, I get “var(–Colors-Brand-25, #fcfaff)”, which is fine. But when exporting to Tailwind, I get “bg-slate-50”, which is #f8fafc. Is there a way to make it export custom colors?

I would personally prefer to see “bg-brand-25” in the output, and then (preferably) a set of colors to insert into tailwind.config.js. But I would even be perfectly fine with having to define the custom colors myself, as long as they are preserved in the class names.

1 Like
2

Hello @Alatius,

Welcome to the builder.io forum post.

Thank you for exploring our code-generating feature and sharing your feedback! We’re delighted to hear that you’re impressed with what you’ve seen so far.

Regarding your concern about exporting to Tailwind CSS, I understand that the generated code seems to be mapping colors to the closest color from the standard Tailwind palette instead of preserving custom colors.

To address this issue, I recommend trying the code generation with custom instructions. With custom instructions, you can instruct the AI to change those Tailwind classes to the format you want, such as “bg-slate-50”. You can find more information about custom instructions in our documentation here.

I hope this helps!

Thanks,

1 Like