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.

It was aout generated, I only added the directories to the purge part: module.exports = { purge: [ './home.html', './code.js', ], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], } — PlasmaBlizzardVampire
– PlasmaBlizzardVampire, Commented Sep 9, 2021 at 11:45
You need the liveserver plugin so you can have your site auto-refresh, its the easiest way. If you don't want to do that though and you still want to continue using XAMP you have to change ALL your paths to a relative path, for example href="style.css" to href="/style.css" — Costa
– Costa, Commented Sep 9, 2021 at 12:18
Thank you really much, at least that helped to get the normal css working, tailwind still isn't working though. — PlasmaBlizzardVampire
– PlasmaBlizzardVampire, Commented Sep 9, 2021 at 14:27
try running the npx command npx tailwindcss -o tailwind.css this will create a tailwind build file with all the classes. But most probably intellisense would work. — Kaartik Nayak
– Kaartik Nayak, Commented Sep 10, 2021 at 8:42

weeshin · Accepted Answer · 2022-01-04 07:47:34Z

2

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

answered Jan 4, 2022 at 7:47

weeshin

431 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

addicted Over a year ago

I think this command have to be run in CLI the whole time we are developing with Tailwind. As a front-end newbie, this is new to me.

Collectives™ on Stack Overflow

tailwind css not changing the webpage

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related