tailwindcss google fonts isn't being loaded into stylesheet-CodePudding

I have a little problem, I'm making a website with php using tailwind as a design system. Now I wanted to define custom fonts for headings and flow text. I've looked at the documentation and googled about it and everywhere I looked, the thing that I wrote should work. Problem is they don't, alltough I'm using the font class it doesn't load the class into the stylesheet.

I appreciate the help.

I'm using this command to watch my files:

yarn tailwindcss -i ./assets/css/inputstyle.css -o ./assets/css/style.css --watch

These are the important files conected to my problem I think:

index.php

<? $currentPage = $_SERVER['REQUEST_URI'];
    if(!file_exists('./pages'.$currentPage.'.php') && $currentPage !== '/'){
        http_response_code(404);
    }
?>
<? require_once('seo.php');?>
<!DOCTYPE html>

<html lang="de">

<head>
    <meta charset="UTF-8" />
    <link rel="apple-touch-icon" sizes="57x57" href="/assets/favicons/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/assets/favicons/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/assets/favicons/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/assets/favicons/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/assets/favicons/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/assets/favicons/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/assets/favicons/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/assets/favicons/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="/assets/favicons/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicons/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png">
    <link rel="manifest" href="/assets/favicons/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="/assets/favicons/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">
    <meta name="msapplication-config" content="/assets/favicons/browserconfig.xml" />
    <title><?=(key_exists((($currentPage ==='/')?'main':$currentPage),$seo)? ($seo[($currentPage ==='/')?'main':$currentPage]['title']):'Eventkassensystem')?></title>
    <meta name="description" content="<?=(key_exists((($currentPage ==='/')?'main':$currentPage),$seo)? ($seo[($currentPage ==='/')?'main':$currentPage]['description']):'Wir bieten das perfekte Kassensystem für jedes Event!')?>">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/assets/css/style.css" rel="stylesheet">
    <script src="/assets/js/base.js"></script>
    <?php if(file_exists('./assets/css'.$currentPage.'.css')){?>
    <link href="<?= '/assets/css'.$currentPage.'.css'?>" rel="stylesheet">
    <?}?>
    <? if(file_exists('./assets/js'.$currentPage.'.js')){?>
    <script src="<?= '/assets/js'.$currentPage.'.js'?>" rel="stylesheet"></script>
    <?}?>
</head>

<body >
    <? require_once('./includes/header.php')?>
    <? require_once((file_exists('./pages'.$currentPage.'.php'))?('./pages'.$currentPage.'.php'):(($currentPage === '/')?('./pages/main.php'):('./pages/404.php')))?>

    <? require_once('./includes/footer.php')?>
</body>

</html>
<?php

header.php

<header >
  <nav >
    <div >
      <a href="/" >EventCashSystem</a>
      <div >
        <button >
          <svg  viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
          </svg>
        </button>
      </div>
      <div >
        <ul >
          <li><a  href="/">Home</a></li>
          <li><a  href="/event-kassensystem">Über</a></li>
          <li><a  href="/bestellen">Bestellen</a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>
<div id="mobilenav" >
  <ul >
    <li><a  href="/">Home</a></li>
    <li><a  href="/event-kassensystem">Über</a></li>
    <li><a  href="/bestellen">Bestellen</a></li>
  </ul>
</div>

inputstyle.css

@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config.js

module.exports = {
  content: ["**/*.{html,js,php}"],
  theme: {
    theme: {
      colors: {
        'blue': '#1fb6ff',
        'purple': '#7e5bef',
        'pink': '#ff49db',
        'orange': '#ff7849',
        'green': '#13ce66',
        'yellow': '#ffc82c',
        'gray-dark': '#273444',
        'gray': '#8492a6',
        'gray-light': '#d3dce6',
      },
      extend: {
        fontFamily: {
          'heading': ['Quicksand', 'sans-serif', 'modern'],
          'flow': ['Quicksand', 'sans-serif'],
        },
        spacing: {
          '8xl': '96rem',
          '9xl': '128rem',
        },
        borderRadius: {
          '4xl': '2rem',
        }
      }
    },
  },
  corePlugins: {
    aspectRatio: false,
  },
  plugins: [
    require('@tailwindcss/line-clamp'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('tailwind-scrollbar-hide')
  ],
}

package.json

{
  "devDependencies": {
    "@tailwindcss/aspect-ratio": "^0.4.0",
    "@tailwindcss/forms": "^0.5.2",
    "@tailwindcss/line-clamp": "^0.4.0",
    "@tailwindcss/typography": "^0.5.2",
    "tailwind-scrollbar-hide": "^1.1.7",
    "tailwindcss": "^3.0.24"
  }
}

CodePudding user response：

You have a problem in your tailwind.config.js file, the problem is that you have 2 'theme' properties in your file and your 'fontFamily' has to be located outside not in the 'exstend' property.

Your file should look like:

module.exports = {
    content: ["**/*.{html,js,php}"],
    theme: {
        colors: {
          'blue': '#1fb6ff',
          'purple': '#7e5bef',
          'pink': '#ff49db',
          'orange': '#ff7849',
          'green': '#13ce66',
          'yellow': '#ffc82c',
          'gray-dark': '#273444',
          'gray': '#8492a6',
          'gray-light': '#d3dce6',
        },
        fontFamily: {
            'heading': ['Quicksand', 'sans-serif', 'modern'],
            'flow': ['Quicksand', 'sans-serif'],
        },
        extend: {         
          spacing: {
            '8xl': '96rem',
            '9xl': '128rem',
          },
          borderRadius: {
            '4xl': '2rem',
          }
        }
    },
    corePlugins: {
      aspectRatio: false,
    },
    plugins: [
      require('@tailwindcss/line-clamp'),
      require('@tailwindcss/aspect-ratio'),
      require('@tailwindcss/typography'),
      require('@tailwindcss/forms'),
      require('tailwind-scrollbar-hide')
    ],
  }

CodePudding user response：

Two Problems i can see are:

here you have imported the font in inputstyle.css file and linked style.css file where you are using this font-flow.
Also you have two nested themes in the tailwind.config.js file.

To use any google fonts with Tailwind CSS, follow the steps:

Go to Google Fonts and select any font, say Dancing Script.
Click on the @import button and copy the import stmt i.e. @import url('https://fonts.googleapis.com/css2family=Dancing Script:wght@600&display=swap'); and paste it in your CSS file at the top.
Now go to the tailwind.config.js file and add fontFamily:{ Dancing:["Dancing Script"."cursive"] } in the extend part, so the complete file will look like this

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        Dancing:["Dancing Script","cursive"],
      }
    },
  },
  plugins: [],
}