Tailwindcss: Font-family declaration breaks with numbers

[sebastiandedeyne]

I have a font-family with a number in it, and that breaks the declaration because the fonts aren't wrapped in quotes.

This breaks:

Without the number, it works (but that's not my font, so no solution):

Quotes would fix it though:

[adamwathan]

Hey @sebastiandedeyne! Yeah this is something we considered early on, and considered trying to handle in a magical way, but the rules for when you need quotes around a font are actually quite complex, so instead of spending time trying to solve that in a robust way, we figured it's much easier to just tell people to add quotes if they need quotes.

So in your case, write your config like this:

fonts: {
  sans: ['"DIN 2014"', ...],
  // ...
}

We might make this more automagical down the road, but for now to keep things simple, the rule is "if your values need quotes, add quotes."

[sebastiandedeyne]

Makes sense, that's how I solved it for now :)

But why not do it the other way around, and always add quotes?

[adamwathan]

But why not do it the other way around, and always add quotes?

That would break certain keywords like serif, sans-serif, etc.

We could whitelist those for sure but just seemed like unnecessary magic when we had so much other work to do.

[sebastiandedeyne]

Cool, gonna leave the quotes in my config then, thanks 😄