CODEWITHSUNDEEP
htmlcsstailwind-css
SVJ99
SVJ99

Reputation: 21

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"
    }

Upvotes: 2

Views: 22724

Answers (4)

DeeMeow
DeeMeow

Reputation: 820

In my case, my content configuration was not correct the right source files was not correctly matched

https://tailwindcss.com/docs/content-configuration#classes-arent-generated

Upvotes: 0

Wally
Wally

Reputation: 785

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.

Upvotes: 1

IMPranshu
IMPranshu

Reputation: 1

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

Upvotes: -3

ImInYourCode
ImInYourCode

Reputation: 605

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

Upvotes: 1

Related Questions