user7665853
user7665853

Reputation: 197

Setup command of Tailwind CSS (compile and watch) does not end after many minutes

I struggle to run a command for the first setup of Tailwind CSS, just by following this tutorial for Flask-Flowbite. The following command to compile and watch does not end after 30 min. I have to kill the process with CTRL+C. There are some questions in Stackoverflow but all solutions do not work for my case. Any idea what is the latest solution and/or what would be wrong with my case?

npx tailwindcss -i ./kg-app/static/src/input.css -o ./kg-app/static/dist/css/output.css --watch
Rebuilding...

warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration

Done in 130ms.

Depending on different solutions above, sometimes Warning appears, sometimes not.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    ".kg-app/templates/**/*.{html,js,jsx}",
    ".kg-app/static/src/**/*.{html,js,jsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

kg-app/static/src/input.css

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

I tried several path candidates in the content found in the solutions found in Stackoverflow, but no success. Note my folder structure is not the same as tutorial:

Before the command:

After the command, add this file:

Upvotes: 0

Views: 777

Answers (1)

BcK
BcK

Reputation: 2821

With --watch switch, you tell tailwind to watch the files and compile it again in case of any changes. If you are waiting for that to end, it will not end and watch the files forever. Remove the switch and try again.

You can use the --watch or -w flag to start a watch process and automatically rebuild your CSS any time you make any changes:

https://v2.tailwindcss.com/docs/installation#watching-for-changes

Upvotes: 1

Related Questions