Using Tailwind3 in Flask application without manually (re-)generating css

Question

I'm currently trying to set up a flask project using tailwindcss 3.0.23. For templating I'm using jinja. Furthermore yarn is used. During previous projects when working on frontend components I was used to an automatic adoption of styling by the usage of inline HTML classes. As I worked myself through this tutorial, I just realized I have to re-run npx tailwindcss -i ./static/src/style.css -o ./static/css/main.css to generate the most recent version of my tailwind css classes, that I defined in my style.css. As I'm now a lazy developer I would like to configure the project in a way that introduces two things.

#1 automatic generation of most recent css

This should allow me to add tailwind classes, which are automatically applied after saving my .css file and reloading my localhost:3000/index page.

#2 inline tailwind html classes for styling

As described earlier, I need to put all my tailwind classes into the style.css file which looks like the following code snippet, to define a class todo-text that is then later used in my templates/index.html. Instead I would be more flexible and also be able to add tailwind classes to my exisitng index.html like this. <p class="text-xl font-mono font-bold">text</p>

@tailwind base;
@tailwind components;

.todo-text {
  @apply text-xl font-mono font-bold;
}

@tailwind utilities;

I have already read about the just-in-time engine of tailwind, but I'm not really sure how to configure my project so that it will work using tailwind 3.0.23. I further do not want to use a CDN as solution and I would appreciate anybody that would also add some explanation about the inner workings, why my current process is so cumbersome and furthermore, which role nodejs plays in this whole topic. Lastly, I've heard of the Flask Assets package but I'm not sure if this is even an option to solve my issues.

---

Config: My tailwind.config.js looks like this:

module.exports = {
  content: ["./templates/*.{html,js,jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

---

Update: As a limited answer to "Why node? What is node used for?" I want to reference this post. But want to encourage you to add more elaborate sources to understand the background of using nodejs better.

Answer 1

I came across the -watch flag that automatically regenerates the latest .css after changes occur.

So just open a new terminal and run npx tailwindcss -i ./static/src/input.css -o ./static/dist/output.css --watch to activate automatic updates after changes in your template files.

Hope that helps!