CODEWITHSUNDEEP
csstailwind-css
user19417266
user19417266

Reputation: 21

TailwindCSS Output CSS not generating

I specified content property for tailwind.config.js and specified correct input and output file paths for "npx tailwindcss" command with -i and -o options. Also, I included correct file paths for href attribute to link compiled css file to my html file. However, when I run npx tailwindcss command, the outputcss is still empty even though I included three @tailwind directives (base, components, utilities). I was wondering how I can resolve this issue.

-My project directory is currently...

-build

-css

-index.html

-package.json

-tailwind.config.js

-Here is tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["index.html"],
  theme: {
    extend: {},
  },
  plugins: [],
}

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href = "build/output.css">
        <title>Food Reviews</title>
    </head>
    <body>
        Hello World! 
    </body>
</html>

package.json file

{
  "name": "food-reviews",
  "version": "1.0.0",
  "description": "",
  "main": "tailwind.config.js",
  "scripts": {
    "build": "npx tailwindcss -i css/input.css -o build/output.css --watch"
  },
  "author": "",
  "license": "ISC"
}

Much help would be appreciated!

Upvotes: 0

Views: 2557

Answers (2)

sdoedp
sdoedp

Reputation: 1

when we are begginers is hard to find the solution sometimes

I had the same problem, it was because index.html wasn't inside the folder src.

this was the first page I found in google, I hope help more people with the same simple problem.

Upvotes: 0

Joe
Joe

Reputation: 559

It is working. You just haven't added any TailwindCSS-specific classes to your HTML file as yet. In new versions of TailwindCSS the output of the CSS file is automatically purged and now a requirement in version 3 onwards.

To verify that it is working, just add something like

  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>

to your <body> tag and check the output CSS again, or simply view the page from within your browser. If the font has changed from Times New Roman to a sans font then that means that it's working.

Upvotes: 0

Related Questions