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

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

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

refs

https://tailwindcss.com/docs/installation

https://www.npmjs.com/package/http-server

---

---

©xgqfrms 2012-2025

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---