I recently attempted to use TailwindCSS on my MacOS system. To install it, I used the command:
npm install -D tailwindcss
Following that, I generated the configuration file by executing the command:
npx tailwindcss init
I then proceeded to customize my configuration file (tailwind.config.js) with the following code:
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
Upon adding a few files, my project directory had a similar structure as seen in this screenshot:
https://i.sstatic.net/TvLy1.png
To generate CSS output in the output.css file, I ran the command:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watchHowever, upon checking the contents of my output.css file, it was empty. In my input.css file, I had included the following lines of code:
@tailwind base;
@tailwind components;
@tailwind utilities;
After running the aforementioned command, I encountered these warnings in my terminal:
warn - The `content` option in your Tailwind CSS configuration is missing or empty.
warn - Configure your content sources or your generated CSS will be missing styles.
warn - https://tailwindcss.com/docs/content-configuration
If anyone has insights on why this setup is not functioning as expected, please share your knowledge.