![]() Each element will inherit it from the HTML element. This way you don’t have to keep repeating the font class over and over. I go into my main CSS file and write this: html font-body There’s also a trick I use if I’m using a single font or a default font. exports =, in the case it would be font-body. Now, the default tailwind config has some fonts already configured and I usually overwrite then but for this example I’ll put my code on the extend section of the config. I paste that into the of my project and grab the css for the name of the font from Google fonts, in this case is font-family: 'Open Sans', sans-serif I always use the version which would give me the following snippet: "> For this example I’ll just use 2 styles, regular (400) and bold (700). Let’s say you want to use the Open Sans font from Google Fonts as part of your project. I see a lot of people with confusion on how to use custom fonts with Tailwind CSS since tailwind has a bit different approach to CSS in general, instead of multiple stylesheets you tend to have a Javascript file with all the config and very little custom css.īut trust me, using custom fonts with tailwind is very straightforward, here’s how you can do it: Using Google Fonts
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |