So guys, I just started Tailwind CSS this morning and I was seriously frustrated while installing the NPM package. I got a lot of errors while installing it, however, after reading a lot of articles and posts from Stackoverflow and other sources, I can say that I cracked the code and I've found the solution to the common tailwind CSS error for many newbies, which is the "The content option in your Tailwind CSS configuration is missing or empty" error. Without further ado, let's dive in.

So, the first time I tried installing tailwind, after following a tutorial on YouTube, my CMD showed a lot of errors and even the index.html page with a link to the css file on the head tag wasn't rendering when I tested it. The major error was on missing content. So, what did I do next? I had to read Tailwind's content documentation and started all over again. Inside the tailwind.config.js folder, I added

module.exports = {
  content: [
    './public/index.html',
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
    './index.html',
],

Before then, the content tag was empty, meaning it only displayed,

module.exports = 
  content: []

And this code alone made the whole tailwind not to work for me. So when installing Tailwind, ensure you add the index.html page, the folder that hosts your index.html page (mine is ./public/index.html) and the other pages as you can see above.

After fixing this error, the next step was to use the terminal(you need to have installed node.js and NPM packages) to run this simple command (the build:css is peculiar to me):

npm run build:css

And guess what? The errors disappeared.

In package.json, you need to change the "test" to

"build:css": "tailwindcss -i src/style.css -o public/output.css -w"

Or, you can create two separate lines of code in the package.json file, which are

"build:css": "tailwindcss -i src/style.css -o public/output.css"

And

"watch": "tailwindcss -i src/style.css -o public/output.css --watch"

So, once you have these two lines of code, you'll need to go to your terminal, and run:

npm run build:css

and

npm run watch

With the watch code running, you don't have to keep typing npm run build:css , once you hit CTRL + S, your code will automatically rebuild.

Here's a break down of the meaning of this line of code

"build:css": "tailwindcss -i src/style.css -o public/output.css"

The -i simply means input ( reads as the input folder where you want the css file to be stored) The -o means output (reads as the output folder where you want the compiled css to be.)

I hope this tutorial helps someone out there.