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

xgqfrms / 2023-08-28 / 原文

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

enter image description here

the right way ✅

use the http:// protocol

enter image description here

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

enter image description here

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