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";
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.