Using 11ty and customizing tailwind for markdown and nunjuck files

Question

I am attempting to create a website using 11ty and tailwind. I am using markdown and nunjuck files for this project and not html files. I am able to use tailwind with the classes that are shown in the documentation just fine, but when I try to customize it in the "tailwind.config.js" file, (such as changing the background color to a specific color that does not align with the color classes), it goes to a white background. The content itself does not change, only the background color.

I have my markdown files in a folder called "blog" and the nunjuck files inside a folder called "_includes". Both of those folders are included in the "src" folder. Inside the src folder, I have two other nunjuck files that are in the "src" folder only, as well as an input.css file for the tailwind.I have followed the instructions to install both 11ty and tailwind to the letter, and nothing that I do seems to get the job done.

Because I am not able to customize tailwind when I am using 11ty, I decided to take a step back. I created a new workspace in visual studio code, focusing only on tailwind. I followed the same steps on installing tailwind from documentation website, and it worked just fine, as long as I run tailwind in the terminal. With following these steps, I did the exact same thing with my 11ty blog, and it did not work.

Here is the git repo that displays the code. https://github.com/Python125/11ty-blog

Answer 1

You seem to have an incorrect file glob in the content array of your Tailwind configuration:

content: ["./src/**/*.{html, njk, js}"],

At the moment, this would expand to:

./src/**/*.html
./src/**/*. njk
./src/**/*. js

Notice the spaces after the dot (.) for the njk and js candidates. Consider removing the spaces like:

content: ["./src/**/*.{html,njk,js}"],