Building CSS with Tailwindcss Not Working

Why is Tailwind's build command not working?

You are missing the npx infront of your build command as tailwindcss is not an executable.

Add npx at the start of your build command in your package.json to resolve this issue.

Here an example based on your provided screenshot:

{
  "name": "project-1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "npx tailwindcss -i ./src/tailwind.css -o ./public/style.css --watch",
    "build-p": "postcss ./src/tailwind.css -o ./public/style.css --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.4.0",
    "postcss": "^8.4.5",
    "tailwindcss": "^3.0.6"
  }
}

Building CSS with Tailwindcss not working

As error says, you need to provide input file with -i flag. Change your script inside package.json to this

tailwindcss -i src/styles.css -o public/styles.css

More information about Tailwind CLI is here

Tailwind CSS not building

You seem to be missing npx in your command, try this instead:

npx tailwindcss build src/style.css -o dist/style.css

https://tailwindcss.com/docs/installation/#4-process-your-css-with-tailwind

Tailwind classes not working with html file

I am not quite sure with this problem, but I recommend you to follow the installation instructions from Tailwind, which I will put it here

Besides I spotted the content field in your tailwind config file is empty, in which you should have specified the path to all of your template files. Here is an example, what this does is pointing to all html and JS file in your src folder. Hope this might help

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

---

Related Topics