TailwindCss classes are not reflected when i start live-server

Question

This is my first time trying to use tailwind css and its been a hassle trying to set it up for days now without success, followed a youtube video for absolute beginners till the end everything was fine until time to load live server and classes just won't reflect. Let me mention that i have not learned any js framework just vanilla. i have also tried the official tailwind setup from thier websites and thier official youtube videos which uses vite, still no luck.

my postcss.config.js file

module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer")],
};

my tailwind config

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

i also have this in css which is reflected in the output files, i added this import because someone advised it here and still didnt work

@import "tailwind/base";
@import "tailwind/components";
@import "tailwind utilities";

Answer 1

You need to tell tailwind.config.js what content it should distributes to. content: ["./src/pages/*.{html,js}"], for example. The path has to be relative to where tailwind.config.js is.

You will also need to uses the live compilation watch mode of Tailwind, which parses content: files for all used CSS classes, compiles them into output.css. In your HTML, you'll just have to includes that output.css

The command goes like that: npx tailwindcss -i /path/to/input.css -o /path/to/output.css --watch

input.css being your original css file (where you've put the @import), and output.css being the file it'll generates each time with the used classes, so the file you'll load onto your HTML.