Why isn't Tailwind applying styles to my HTML?

Solution 1:

You do not specify the input file (tailwind.css) as your stylesheet, you have to build the stylesheet with npx tailwindcss -i ./src/tailwind.css -o ./dist/output.css --watch. The --watch flag will rebuild your CSS when you save. The destination and name of the output is up to you.

The HTML:

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href = "/dist/output.css" rel ="stylesheet">
    </head>
    <body class="bg-green-400">
        <h1 class="text-3xl font-bold underline">
            Hello world!
          </h1>
    </body>
    </html>

Docs

Why isn't Tailwind applying styles to my HTML?

Solution 1:

Related

Recent Posts