Build --> Stop Tailwind Build Process does not reset itself after the build completes

[gregoryagu]

First off, thanks so much for this extension. I am a newbie in Tailwind, trying to get it up and running in Visual Studio.

I notice that if you use the main menu Build -- > Start Tailwind Build Process, it builds everything normally, and the menu item changes to Sop Tailwind Build Process. However, even after the process is complete, the menu item remains the same. So, the next time I go to the menu item, I click on the Stop, and then it changes to Start, and then I click on it again to start it. This is minor but I just wanted to give you feedback on it.

Cheers

[theron-wang]

If I’m understanding correctly, this is actually intentional - the extension uses Tailwind JIT so the process runs in the background until you manually stop it (similar to VS Hot Reload).

If you meant that the menu item says that the process is active when it actually isn’t, please let me know.

Thanks!

[gregoryagu]

Ok, so I did not realize it might be a background process. But I don't think it is actually running in the background. This is what I see in the Build Window:

1. I click Build - Start Tailwind... Shows "Tailwind CSS: Build started..." followed by: "Tailwind CSS: Build succeeded in 7375ms at 2:58:32 PM." So it clearly ran the build process.
2. I then try changing something to see JIT running: I update tailwind.config.js to add "darkMode:' media'" which should cause it to include the dark classes. I then save the file. But the output file does not change, and does not include the Dark classes.
3. I then click on Build --> Stop Tailwind, and the output window shows "Build Stopped"
4. I clikk again on Build --> and the process repeats, although Dark Mode is still not included.

Sorry, I am a newbie at this, forgive me if I am missing something obvious.

The Output Extensions window shows no messages.

[theron-wang]

Sorry if this is a dumb question, but do you have the correct content path in your tailwind.config.js? Theoretically, the build process (as it is the official one) should generate the correct dark mode classes as long as that is correct.

Something else you can do is to make sure that the extension is generating the classes in the right file; sometimes it creates a new file <input file name>.output.css with the correct classes in it.

Please let me know if this resolves the issue!

[gregoryagu]

Ok, I worked with this some more, including setting up a CLI version of Tailwind, and all seems to be working correctly now. I am not sure why it was not working for me earlier.

I do have two suggestions:

1. Change the label to "Stop Tailwind JIT Build Process" so it is clear that the JIT is running, not a one time build.
2. In the context menu where it says "Set as TailwindCSS build file" change it to "Set as TailwindCSS input file" It was not clear to me at first that the build file is the same thing as the input file. It took me a while to figure that out as I was looking for a configuration for the Input file, but could not find it until I realized it was the same thing.

Thanks for your help on this!

[gregoryagu]

I made a Video on how to set up and use the extension using VS 22 and Blazor: https://www.youtube.com/watch?v=guJgtQHQwPo

[theron-wang]

Thanks so much! I really appreciate that. If it’s alright with you, I’ll link the video on the getting started page.

[gregoryagu]

Yes, certainly!! I hope to do more VS / Tailwind videos :)