CODEWITHSUNDEEP
csstailwind-css
Xeyes
Xeyes

Reputation: 599

Tailwind css font-family classes are not rendering as they should

Context

I want to use tailwind css 3.0 in one of my vuejs 2 project. I correctly setup tailwind css to make it work in my project.

What i try to do

The first thing i wanted from tailwind css is the font management. The first thing i tried to do is use the font family modifier font-sans as it is explained here. so in a given div i added the classes : font-sans and font-semibold which simply is a font-size modifier.

What i expected

So if i go back on the tailwind css website they show us the result of adding the font-sans class to text here, and it looks like that (to be precise all the classes applyed on this text are : font-sans text-lg font-medium text-gray-900) :

enter image description here

So i did the same on my project and i obtain this :

enter image description here

The problem

We can easily see that those two sentences doesn't have the same style (the font-family is the problem). And i don't understand why they havn't the same rendering as they have the exact same classes.

thank you for any time spent on this problem, if you need more precisions just ask me

Upvotes: 0

Views: 1982

Answers (1)

Danila
Danila

Reputation: 18476

Tailwind site uses custom font for their site (specifically Inter var):

font-family: Inter var,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji

If you want to customize it you can do it in tailwind.config:

module.exports = {
  theme: {
    fontFamily: {
      'sans': ['ui-sans-serif', 'system-ui', ...],
      'serif': ['ui-serif', 'Georgia', ...],
      'mono': ['ui-monospace', 'SFMono-Regular', ...],
      'display': ['Oswald', ...],
      'body': ['"Open Sans"', ...],
    }
  }
}

Upvotes: 2

Related Questions