htmlcsstailwind-css

Tailwind classes not working with html file

I am getting a different font output because of tailwindcss but the classes aren't showing any output.

The files:

package.json

    {
  "dependencies": {
    "autoprefixer": "^10.4.1",
    "postcss": "^8.4.5",
    "tailwindcss": "^3.0.8"
  },
  "scripts": {
    "build-css": "tailwindcss build style.css -o css/style.css"
  }
}

style.css

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

tailwind.config.js

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

index.html

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div>
    <div>
      <h1 class="font-sans">Welcome to my tailwind course</h1>
      <h2 class="font-serif">Created by Varun Prasannan</h2>
      <p class="font-mono">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Commodi, dignissimos numquam temporibus quisquam optio suscipit neque iure nam ab architecto quaerat similique vero, a aperiam impedit dolores. Autem, iure expedita.</p>
    </div>
  </div>
</body>
</html>

As you can see, different font classes are applied such as

class="font-sans"
class="font-serif"
class="font-mono"

but the output is the same tailwindcss default font.

I have a feeling that the paths to some files(that I don't know of) have to be updated in the tailwind.config.js file, but i don't exactly know the path format.

Solution

  • I am not quite sure with this problem, but I recommend you to follow the installation instructions from Tailwind, which I will put it here

    Besides I spotted the content field in your tailwind config file is empty, in which you should have specified the path to all of your template files. Here is an example, what this does is pointing to all html and JS file in your src folder. Hope this might help

    module.exports = {
  content: ["./src/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}