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!
