CODEWITHSUNDEEP
tailwind-css
Chain Truth
Chain Truth

Reputation: 181

Tailwind CSS custom font not appearing in compiled CSS

I'm following the Tailwind CSS documentation, but after I rebuild the CSS file, the font class does not appear in the generated file for some reason. So, I went to Google Fonts and copied the import and pasted it into a CSS file I want to compile, and it looks like this:

styles.css

@tailwind base;
@tailwind components;
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=Lato:wght@300;400;700;900&family=Roboto:wght@400;500;700&family=Rubik:wght@400;500;700&display=swap');
@tailwind utilities;

Then I went to the Tailwind config file and added fontFamily.

tailwind.config.js

module.exports = {
    purge: [],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {

        },
        fontFamily: {
            'body': ['Lato'],
        }

    },
    variants: {
        extend: {},
    },
    plugins: [],
}

At last, I used this command to recompile

npx tailwindcss build styles.css -o output.css

If I try to apply the class "font-body," it doesn't work, and that makes sense since the class is not in output.css

Upvotes: 0

Views: 1142

Answers (1)

Poornima T
Poornima T

Reputation: 413

Few mistakes that I see in your code are:

  1. The import statement should always be on the top of the file
  2. Your configuration should be like this
    fontFamily:{ 
                'Lato':{'Lato', 'sans-serif'}
               }

  1. You should use the css rules to specify as mentioned in google fonts.

  2. Your import statement has 3 fonts. If you are only using Lato, remove the others and configure them properly for your own better understanding.

  3. We should generally rebuild our css file, if you have done major changes. Rebuilding is not necessary in v.2. Using : npm build YOUR_FILE.css and restarting dev server should work. No need of creating another output file.

Upvotes: 1

Related Questions