Let me start by mentioning that although the title of this question is reminiscent of this other question on Stack Overflow, I have already tried the solutions provided there with no success.
I initially attempted to set up Tailwind using their official CLI guide, but encountered issues. Subsequently, I followed a tutorial on YouTube for the setup process, yet Tailwind remains unresponsive.
In the aforementioned post, a user highlighted the importance of specifying the path from your tailwind.config.js file to your HTML accurately - something which I have ensured in my case as well.
This is an excerpt from my tailwind.config.js file:
module.exports = {
content: ['./*.html'],
theme: {
extend: {},
},
plugins: [],
}
Furthermore, here is a visual representation of my folder structure:
https://i.sstatic.net/L0V15.png
The contents of my input.css file are as follows:
@tailwind base;
@tailwind components;
@tailwind utilities;
And the contents of my index.html file are as shown below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<title>Portfolio</title>
</head>
<body>
<h1 class="text-sky-400">Hello world!</h1>
</body>
</html>
To execute the process, I followed the steps outlined in the YouTube tutorial and added the following script to my package.json:
"scripts": {
"build": "tailwindcss -i ./input.css -o ./css/main.css",
"watch": "tailwindcss -i ./input.css -o ./css/main.css --watch"
},
I then use npm run watch to run it accordingly.
However, upon building it, only the plain HTML displays without any of the expected Tailwind styling. What could possibly be going wrong here? And how can I rectify this issue?