How to fix the Tailwind CSS output.css not work All In One

static web server

reason

You opened the HTML file in the wrong way.
You need to open it with a static web server.

the error way ❌

use the fill:// protocol

the right way ✅

use the http:// protocol

solution

An easy way to use a static web server

# install
$ npm i http-server

{
  "name": "tailwindcss-demo",
  "version": "1.0.0",
  "description": "tailwind css",
  "main": "index.js",
  "scripts": {
    "dev": "npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch",
    "build": "npx tailwindcss -i ./src/input.css -o ./dist/output.css",
    "start": "http-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "tailwind",
    "css"
  ],
  "author": "xgqfrms",
  "license": "MIT",
  "devDependencies": {
    "tailwindcss": "^3.3.3"
  },
  "dependencies": {
    "http-server": "^14.1.1"
  }
}

# run the npm script command, then open the bellow link
$ npm start

http://127.0.0.1:8080/src/index.html

demos

https://stackoverflow.com/questions/76933053/tailwind-classes-not-being-applied-in-node-application-html-file/76988679#76988679

https://stackoverflow.com/questions/76424982/changes-in-tailwind-config-js-not-reflected-in-output-css-when-adding-or-removin

(? 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

config

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

https://tailwindcss.com/docs/configuration