Tailwind not automatically updating styles without npm run build-css

Question

This is my first time using Tailwind and I'm stuck just setting it up. I'm following a course on Udemy and I've gone over every step twice but mine just isn't working like it is in the video.

Styles applied with Tailwind are working but every time I add something new in, I have to use npm run build-css to see any of the changes.

When watching the video, he'll put in a new style class and just save it then refresh the browser and the changes are there.

Is there something I'm missing here? I've been hunting around for an answer for a while and can't find any help.

package.json

{
  "name": "package.json",
  "version": "1.0.0",
  "description": "package.json",
  "main": "tailwind.config.js",
  "dependencies": {
    "autoprefixer": "^10.4.7",
    "postcss": "^8.4.14"
  },
  "devDependencies": {
    "tailwindcss": "^3.0.24"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build-css": "tailwindcss build -i style.css -o css/style.css"
  },
  "author": "",
  "license": "ISC"
}

tailwind.config.js

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

style.css

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

Answer 1

Using the build command will only update the output file on that instance. You should be using the watch command so the output file is constantly being updated. Here are the scripts I'm using to develop with Tailwind.

/ package.json /

"scripts": {
  "start": "react-scripts start",
  "build-css": "tailwindcss build -i ./src/input.css -o ./public/output.css",
  "watch-css": "tailwindcss build -i ./src/input.css -o ./public/output.css --watch",
  "dev": "concurrently \"npm run watch-css\" \"npm start\""
},

Run "npm run watch-css" instead of "npm run build-css" [Replace the file location with your own files. After -i is the location of your input css file, after -o is the location of your output css file].

If you're trying to use React, you can install concurrently to run scripts simultaneously. In this case I'm starting my local ReactJS project and I'm watching the Tailwind output file. Or you could just open two terminals and run both scripts.

There's good information in the TailwindCSS Documentation.