tailwind css not changing the webpage

Question

I wan to to use the tailwind css framework for the first time, I tried to follow the tutorial on their page as close as possible, but it is not making any changes to my webpage and I don't know why. Since I am very inexperieneced, I guess I have missed installing or doing something, since it is my first time using a framework for my project. Also I have started using Visual Studio Code for my first time and I am a bit overwhelmed how everything works.

What I have got for now:

Installed node.js, since I read somewhere I need it for tailwind css, seems to work node --version command sends result.

Installed tailwind css in my project folder (project folder is inside HTDOCS folder from XAMPP) with npx tailwindcss init in the vs terminal, after changing directories to my project folder. Now I also have a node_modules folder and a tailwind.config.js there

Addet

<link rel="stylesheet" href="style.css" type="text/css">

in my home.html and

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

to my style.css

Then I tried to add

class="bg-green-500"

to my body in home.html and it is shown in the editor, but not on the website...

What am I missing ? Thanks for help.

Answer 1

You should follow the official setup guide: Get started with Tailwind CSS

From your description, you might have not followed the build step:

Run the CLI tool to scan your template files for classes and build your CSS: npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch