Html Question posted in
Some basic documentation can be found here.

Html – tailwind not loading colors

Having simple html:

public/index.html:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="styles.css">
</head>

<body class="text-red-600">
  some text
</body>

where the css was obtained from tailwindcss -i src/styles.css -o public/styles.css

src/styles.css:

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

tailwind.config.js:

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

the red color from <body> tag does not apply. Are default tailwind classes imported into public/styles.css?

Tags:

2

Answers


  1. 0

    It seems like the public/index.html file is not covered by the content file globs in your Tailwind configuration. You must ensure that source code files that use Tailwind classes are covered by the content file globs, otherwise Tailwind will not scan these files and will not generate CSS rules for class names present. Consider reading the documentation on configuring content.

    module.exports = {
  content: [
    "./src/**/*.{html,js}",
    "./public/index.html",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
    Login or Signup to reply.
  2. 0

    You have mentioned **content: ["./src/**/*.{html,js}"]** in the tailwind.config.js file .So it will apply css for file inside the src directory with html and js extension. so html file should be inside the src folder. Therefore Folder structure should be src/index.html.
    But if you want apply css without src folder then you have to mentioned that path in tailwind.config.js file like this.

    content: [
    "./src/**/*.{html,js}",
    "./public/index.html",
  ]
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search