Question 112222 in Ubuntu Question posted in
The official Ubuntu documentation can be found here.

Ubuntu – Tailwind CLI's –watch not working properly

Each time I add a new class to the index.html file, I need to rebuild the output.css file manually.

The package.json file:

{
  "name": "tailwind-practice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "npx tailwindcss --watch -i ./input.css -o ./output.css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "tailwindcss": "^3.1.7"
  }
}

The tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  screens: {
    'sm': '480px',
    'md': '768px',
    'lg': '1440px',
  },
  content: ['./index.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

I am supposed to run npm run build once, and each time I saved the html file, tailwind is supposed to add my new classes to output.css. But it doesn’t. I checked the file after saving index.html and I couldn’t find my new classes there. But the CLI shamelessly said it rebuilt it in 20ms. I needed to run npm run build each time to successfully build my css file. Also, I deleted my previous nodejs installation and reinstalled the current version, updated VS Code, updated Google Chrome, and now, I am considering moving back to Windows from Manjaro.

Edit: A useful observation.

After saving index.html, the CLI said this:

Rebuilding...
Done in 27ms.

But when I stopped the process and reran npm run build, it said:

Rebuilding...
Done in 198ms.

There is a relatively huge time delay when it actually works.

Edit 2:

It works when I save index.html multiple times rapidly.

I moved from Manjaro to Ubuntu, and it still doesn’t work!

Tags:

3

Answers


  1. 0

    Assuming this is how you think Tailwind CLI works:

    1. This is your input.css:
    .aaa {
  color: blue;
}
    1. This is your index.html:
    ...
<div class="aaa">AAA</div>
    1. You execute npm run build
    2. You go to index.html and add an HTML element with some Tailwind class
    ...
<div class="aaa">AAA</div>
<div class="font-bold">BBB</div>
    1. You expect your output.css to be magically built into this:
    .aaa {
  color: blue;
}
.font-bold {
  font-weight: 700;
}

    This is how Tailwind CLI actually works:

    1. In your input.css you have to first specify which Tailwind layers you think you will use in your index.html. Let’s add a layer called utilities which enables you to use Tailwind classes such as font-bold, underline, etc.
    @tailwind utilities;

.aaa {
    color: blue;
}
    1. You execute npm run build
    2. You go to index.html and add an HTML element with some Tailwind class which belongs to the utilities layer
    ...
<div class="aaa">AAA</div>
<div class="font-bold">BBB</div>
    1. You go to output.css et voila – the Tailwind class is there:
    .font-bold {
  font-weight: 700;
}
.aaa {
  color: blue;
}
    1. You add another Tailwind class from the utilities layer
    ...
<div class="aaa">AAA</div>
<div class="font-bold underline">BBB</div>

    et voila:

    .font-bold {
  font-weight: 700;
}
.underline {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}
.aaa {
  color: blue;
}
    Login or Signup to reply.
  2. 0

    You need to add these to your input.css to make the --watch work properly.

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

    Without these, TW won’t know from where it should pull info for your CSS classes and write a processed version in output.css

    Let’s say you wrote <h1 class="underline">Hello world! </h1> in index.html.
    Tw needs to look for information on how it can parse + process the underline class and what should be written in output.css regarding this class.

    Try it and let me know if it works.

    Login or Signup to reply.
  3. 0

    try changing

    from

    npx tailwindcss --watch -i ./input.css -o ./output.css

    to

    npx tailwindcss -i ./input.css -o ./output.css --watch
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search