TailwindCSS Output CSS not generating

Question

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

output.css

-css

input.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!

Joe · Accepted Answer · 2023-03-22 03:39:17Z

0

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.

answered Mar 22, 2023 at 3:39

Joe

5741 gold badge8 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sdoedp · Accepted Answer · 2023-10-11 17:29:24Z

0

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.

answered Oct 11, 2023 at 17:29

sdoedp

1

Collectives™ on Stack Overflow

TailwindCSS Output CSS not generating

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related