'Why isn't Tailwind applying styles to my HTML?

Tailwind is not applying styles to my HTML. The "hello world" font has changed so Tailwind has been installed, but no style is being applied.

Index.html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href = "/css/tailwind.css" rel ="stylesheet">
    </head>
    <body class="bg-green-400">
        <h1 class="text-3xl font-bold underline">
            Hello world!
          </h1>
    </body>
    </html>

Tailwind.css:

    @tailwind base;
    @tailwind components;
    @tailwind utilities;

package.json:

    {
      "name": "islanderoutdoors",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "dependencies": {
        "acorn": "^7.4.1",
        "acorn-node": "^1.8.2",
        "acorn-walk": "^7.2.0",
        "ansi-styles": "^4.3.0",
        "anymatch": "^3.1.2",
        "arg": "^5.0.1",
        "binary-extensions": "^2.2.0",
        "braces": "^3.0.2",
        "browserslist": "^4.19.1",
        "callsites": "^3.1.0",
        "camelcase-css": "^2.0.1",
        "caniuse-lite": "^1.0.30001300",
        "chalk": "^4.1.2",
        "chokidar": "^3.5.2",
        "color-convert": "^2.0.1",
        "color-name": "^1.1.4",
        "cosmiconfig": "^7.0.1",
        "cssesc": "^3.0.0",
        "defined": "^1.0.0",
        "detective": "^5.2.0",
        "didyoumean": "^1.2.2",
        "dlv": "^1.1.3",
        "electron-to-chromium": "^1.4.46",
        "error-ex": "^1.3.2",
        "escalade": "^3.1.1",
        "escape-string-regexp": "^1.0.5",
        "fast-glob": "^3.2.11",
        "fastq": "^1.13.0",
        "fill-range": "^7.0.1",
        "fraction.js": "^4.1.2",
        "fsevents": "^2.3.2",
        "function-bind": "^1.1.1",
        "glob-parent": "^6.0.2",
        "has": "^1.0.3",
        "has-flag": "^4.0.0",
        "import-fresh": "^3.3.0",
        "is-arrayish": "^0.2.1",
        "is-binary-path": "^2.1.0",
        "is-core-module": "^2.8.1",
        "is-extglob": "^2.1.1",
        "is-glob": "^4.0.3",
        "is-number": "^7.0.0",
        "js-tokens": "^4.0.0",
        "json-parse-even-better-errors": "^2.3.1",
        "lilconfig": "^2.0.4",
        "lines-and-columns": "^1.2.4",
        "merge2": "^1.4.1",
        "micromatch": "^4.0.4",
        "minimist": "^1.2.5",
        "nanoid": "^3.2.0",
        "node-releases": "^2.0.1",
        "normalize-path": "^3.0.0",
        "normalize-range": "^0.1.2",
        "object-hash": "^2.2.0",
        "parent-module": "^1.0.1",
        "parse-json": "^5.2.0",
        "path-parse": "^1.0.7",
        "path-type": "^4.0.0",
        "picocolors": "^1.0.0",
        "picomatch": "^2.3.1",
        "postcss-js": "^4.0.0",
        "postcss-load-config": "^3.1.1",
        "postcss-nested": "^5.0.6",
        "postcss-selector-parser": "^6.0.8",
        "postcss-value-parser": "^4.2.0",
        "queue-microtask": "^1.2.3",
        "quick-lru": "^5.1.1",
        "readdirp": "^3.6.0",
        "resolve": "^1.21.0",
        "resolve-from": "^4.0.0",
        "reusify": "^1.0.4",
        "run-parallel": "^1.2.0",
        "source-map-js": "^1.0.1",
        "supports-color": "^7.2.0",
        "supports-preserve-symlinks-flag": "^1.0.0",
        "to-regex-range": "^5.0.1",
        "util-deprecate": "^1.0.2",
        "xtend": "^4.0.2",
        "yaml": "^1.10.2"
      },
      "devDependencies": {
        "autoprefixer": "^10.4.2",
        "postcss": "^8.4.5",
        "tailwindcss": "^3.0.15",
        "vite": "^2.7.12"
      },
      "scripts": {
        "dev": "vite"
      },
      "keywords": [],
      "author": "",
      "license": "ISC"
    }
htmlcsstailwind-cssjsonwordpresspo


Solution 1:[1]

You do not specify the input file (tailwind.css) as your stylesheet, you have to build the stylesheet with npx tailwindcss -i ./src/tailwind.css -o ./dist/output.css --watch. The --watch flag will rebuild your CSS when you save. The destination and name of the output is up to you.

The HTML:

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href = "/dist/output.css" rel ="stylesheet">
    </head>
    <body class="bg-green-400">
        <h1 class="text-3xl font-bold underline">
            Hello world!
          </h1>
    </body>
    </html>

Docs

Solution 2:[2]

try running the following command:

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

and then proceed with your task as usual and see it it works

Solution 3:[3]

My issue was being caused by needing to run the build command from the same location as the config file.

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

More detail -

I did not realise that the above tailwind command was not a GLOBAL command i.e. if your config file is in the root of your file system, but your css files are in the assets directory, you cannot run the build command from the assets directory, it needs to run from the root (or were ever the tailwind.config file is).

So:

in dir assets/css/

running npx tailwindcss -i input.css -o output.css --watch (where the tailwind css file is and output should be generated)

generates errors:

warn - The `content` option in your Tailwind CSS configuration is missing or empty.
warn - Configure your content sources or your generated CSS will be missing styles.
warn - https://tailwindcss.com/docs/content-configuration

From the location of the tailwind.config file i.e. in dir ./ or root

running:

npx tailwindcss -i ./public_html/ASSETS/CSS/input.css -o ./public_html/ASSETS/CSS/output.css --watch

Then works.

This might be way to much info, but will help if you have moved your files around and are getting errors as a result.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ImInYourCode
Solution 2 IMPranshu
Solution 3 Wally

Related Questions