Search code examples
htmlcsserror-handlingtailwind-csshtml-helper

Styles not applying on web from tailwindcss

I followed the tutorial perfectly and made a website while using the live server extension and it was applying. I use Chrome, Edge and Opera to check the .html file itself but no style was applied in the matter of fact it still shows as applied in the live server extension

The files

index.html:

<!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" />
  </head>
  <body class="m-0 bg-blue-500 p-0">
    <nav class="m-0 h-full w-full space-x-4 border bg-blue-400 p-6">
      <h1 class="text-3xl font-bold drop-shadow-md md:filter-none">
        Safer Internet
      </h1>
      <div
        class="absolute top-7 right-14 space-x-10 stroke-2 font-extrabold hover:stroke-black"
      >
        <button
          class="position inline-block text-right duration-700 hover:text-white"
        >
          <a href="./index.html">Home</a>
        </button>
        <button
          class="position inline-block text-right duration-700 hover:text-white"
        >
          <a href="./More.html">More</a>
        </button>
        <button
          class="position inline-block text-right duration-700 hover:text-white"
        >
          <a href="./About.html">About</a>
        </button>
      </div>
    </nav>
    <div>
      <p
        class="absolute left-64 top-2/4 translate-x-2/4 translate-y-2/4 text-center text-xl font-bold"
      >
        To be able to know how to be safe on the internet click the button
        bellow.
      </p>
      <div
        class="relative top-96 flex translate-y-2/3 items-center justify-center text-center"
      >
        <button
          class="relative top-9 w-1/6 rounded-xl bg-blue-900 p-4 font-extrabold duration-700 hover:bg-black hover:text-white"
        >
          <a href="./More.html">More</a>
        </button>
      </div>
    </div>
  </body>
</html>

tailwind.config.js:

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

style.css:

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

I tried everything and it didn't work and I expected the styles to apply on my browser.

Solution

  • Proper approach to follow when using Tailwind-CLI

    1. Know about your file structure. Use:

    public
|_ tailwind_base.css 
   👆 File from which the output.css is produced
     @tailwind base;
     @tailwind components;
     @tailwind utilities;
|_ output.css
src
|_ index.html   
  👆 Link with the output.css using 
    <link href="../public/output.css" rel="stylesheet" />

    Watch it as

    npx tailwindcss -i ./public/tailwind_base.css -o ./public/output.css --watch

    Specify your html/js in tailwind.config.js

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

    Use tailwindcss classes happily in your index.html file 😇