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

Tailwind not applying to html

I basically did everything on what the instruction had said BUT it is still not working somehow. I wanted to test out things here and there since I am new at this kind of stuff.

All files
all files

HTML FILE

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="dist/output.css" rel="stylesheet">
  <link href="src/input.css" rel="stylesheet">  
</head>
<body>
  <div class="text-red-400 bg-slate-300 text-xl">
    Hello world!
  </div>
  <div class="bg-slate-600">
    Testing
  </div>
</body>
</html>

TAILWIND CONFIG FILE

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

output.css file
output.css file
json file
json file
the result
the result

Tags:

2

Answers


  1. 0

    Consider checking you have the following in what I assume to be the input file for Tailwind, src/input.css:

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

    The dist/output.css should not be covered by the content file globs:

    content: [
  "./src/**/*.{html,js}",
  "./main/index.html",
],

    Assuming src/input.css is the input file for Tailwind, then it should not be referenced in main/index.html.

    The path referenced for dist/output.css seems incorrect in main/index.html, it should be ../dist/output.css, if the server serving main/index.html serves upper-level folders like this. If the server does not, you may wish to instead move the output.css file to main/dist/output.css without changing the original reference path.

    Then, ensure you run to compile the Tailwind CSS rules:

    npx tailwindcss --input src/input.css --output main/dist/output.css
    Login or Signup to reply.
  2. 0

    Try Installing Tailwindcss extension as shown in this snippet.Tailwind css extensionsnippet

    after installing it reboot the vscode and try it.

    Or use this link to install it Tailwincss

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search