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

(🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 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

refs

https://tailwindcss.com/docs/installation

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

---

---

©xgqfrms 2012-2021

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

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

---