CODEWITHSUNDEEP
htmlcsstailwind-css
Varun Prasannan
Varun Prasannan

Reputation: 3

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.

Upvotes: 0

Views: 5817

Answers (5)

tikej
tikej

Reputation: 322

to add to the answers, not sure what the problem was in your case, but in mine it was tailwind config.

turns out tailwind doesn't read { } when you got only 1 file type, so I basically needed to change :

 /src/**/*.{html}

to

 /src/**/*.html

Upvotes: 0

Phu Duong
Phu Duong

Reputation: 1

u forgot add config in tailwindcss.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Upvotes: 0

Labanino
Labanino

Reputation: 3960

According to Tailwind docs:

tailwind.config.js

module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}'
  ],
  // ...
}
  1. Use * to match anything except slashes and hidden files
  2. Use ** to match zero or more directories
  3. Use comma-separate values between {} to match against a list of options

https://tailwindcss.com/docs/content-configuration

Upvotes: 2

Surya Ram
Surya Ram

Reputation: 51

Add html file path to tailwind.config.js file "content" tab. Here my HTML file is in public folder and styles.css in src folder. And important step is run this command immediately.

npx tailwindcss -i ./src/styles.css -o ./public/styles.css

then only tailwind classes are reflecting on live-server

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

Upvotes: 0

entee28
entee28

Reputation: 46

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: [],
}

Upvotes: 3

Related Questions