[SOLVED] Font does not work after connecting it to Tailwind

Font does not work after connecting it to Tailwind

I connect the font in head (index.html)

 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap"
      rel="stylesheet"/>

file tailwind.config.js

module.exports = { 
    content: ["./src/**/*.{html,js}"], 
    theme: {
        extend: {
          fontFamily: {
            playfair: ['"Playfair Display"', 'cursive'],
          }
        }
      }
};

and how I use <h1 class="font-playfair">Enjoy Your Favorite Coffee</h1>

I checked the font is attached correctly, because if you attach it in the css file everything works

Solution

Based on your question and comment about using CND, I assume you might have been mixed two possible setup options in an incorrect way.

CDN setup

This is the simplest option, it doesn't require dealing with any command, installing node packages, etc. All you need is to add script tag to reference tailwindcss library from the CDN and, if needed, add any configurations or customization in that same HTML file. See more details in the documentation.

Note that in this case, tailwind does not have access to other files, it can work only with what included into the HTML code. So configs and everything else should be included explicitly.

This is an example using that font:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap"
      rel="stylesheet"/>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: {
            playfair: ['"Playfair Display"', 'cursive'],
          }
        }
      }
    }
  </script>
</head>
<body>
  <h1 class="font-playfair">
    Hello world!
  </h1>
</body>
</html>

CLI setup

In that case you should use Command-Line Interface (CLI) to build your retulting CSS file based on configuration in tailwind.config.js and you input CSS files.

Minimum setup to add that font would be:

In the empty folder install tailwindcss node package (run npm i tailwindcss);
Create tailwind.config.js with your configuration:

module.exports = { 
    content: ["./src/**/*.{html,js}"], 
    theme: {
        extend: {
          fontFamily: {
            playfair: ['Playfair Display', 'cursive'],
          }
        }
      }
};

Create src folder and index.html in that folder:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap"
      rel="stylesheet"/>
  <link href="./output.css" rel="stylesheet">
</head>
<body>
  <h1 class="font-playfair">
    Hello world!
  </h1>
</body>
</html>

Run build by calling npx tailwindcss -o ./src/output.css so it will create output.css in the src folder.

Whenever you change configuration, or add more CSS, you'll have to rebuild output.css to reflect changes. You can also run build command adding --watch argument, so it will monitor your files changes and automatically rebuild the output.css.

See more details in the documentation.