What's the most common way to handle different font-sizes when using tailwind?
f.e. when I define a component like this
<x-forms.text text="login" size="[25px]" />
and my component itself looks like this
@props(['text', 'size' => 'xs', 'weight' => 'medium', 'font' => 'inter', 'align' => 'start'])
<span
{{ $attributes->merge(['class' => "text-{$size} font-{$weight} font-{$font} text-black dark:text-default
text-{$align}"]) }}>
{{ $text }}
</span>
it would generate a HTML like this:
<span class="text-[25px] font-medium font-inter text-black dark:text-default text-start">
login
</span>
But somehow this specific CSS class is missing, causing the element to be not the requested size
.text-\[25px\] {
font-size: 25px;
}
I think the problem is tailwind isn't aware of the class, but is there a way to make tailwind understand this class or what's the best way to keep components dynamic in view of font-size?
The tailwind docs has a section on it: https://tailwindcss.com/docs/content-configuration#dynamic-class-names
I don't think you're going to be able to have the complete flexibillity of defining the font size by pixels, like text-[25px], this way.
You need to pass the complete string. You cannot combine them at runtime.
Remember, the tailwind classes are built when you save the file, not when you run the code
Please or to participate in this conversation.