Not reading the directories

[youradds]

I'm trying to migrate from v3 to v4. I've created a new folder:

mkdir 2025
npm init -y
npm install -D tailwindcss@latest @tailwindcss/cli@latest
npm i -D daisyui@latest

Running it via:

npx tailwindcss -i ./css/style.css -o ./dist/output.css --watch

The CSS file is built, but its ignoring all my files. The structure is:

• /home/user/web/mysite.com/public_html/2025 (the tailwinds dir)
• /home/user/web/mysite.com/public_html/2025/css
• /home/user/web/mysite.com/public_html/2025/dist
• /home/user/web/mysite.com/public_html/cgi-bin/admin/templates/2024/*.html - being one of the folders I would expect it to read

Is there a way to debug, to see what folders its trying to read? My tailwind.config.js looks like:

/** @type {import('tailwindcss').Config} */ module.exports = { content: [ "../*.{html,js}", // public_html/*.html "../../cgi-bin/admin/templates/2024/*.html", "../../cgi-bin/admin/templates/2024/**/*.html", "**/*.{html,js}" ], theme: { extend: {}, }, plugins: [ require('@tailwindcss/typography'), require('@tailwindcss/forms'), // require('@tailwindcss/line-clamp'), //require('@tailwindcss/aspect-ratio'), ], daisyui: { themes: ["winter","cupcake"] }, }

TIA!

Andy

[wongjn]

It doesn't seem like you're using the tailwind.config.js (you need to explicitly reference this in v4).

You'd want to use the CSS configuration. For example, consider using @source to set the correct content paths.

[youradds]

Thank you - that now reads it :) I'm still seeing weird behaviour though. I have:

@import "tailwindcss";
@plugin "daisyui";

@source "../../../cgi-bin/admin/templates/2024/*.html";
@source "../../../.cgi-bin/admin/templates/2024/**/*.html";
@source "../**/*.{html,js}";

... some extra CSS

Nowin ../../../.cgi-bin/admin/templates/2024/Articles/test.html , I have:

<img src="/2023/images/svg/cart.svg" class="w-12 lg:hidden mr-3" alt="Menu">

Yet when I inspect it, I don't see any of the classes ? I know its seeing the file, as when I run:

npx tailwindcss -i ./css/style.css -o ./dist/output.css --watch

and then I edit and save style.css - I can see it build - just not with all the classes I'm expecting? Maybe I'm still missing something? It definatly feels like its missing something. The current build I have on v3 is 127kb - and this one is 25kb. So quite a chunk missing :/

Thanks!

Andy

[wongjn]

You can try running:

DEBUG=* npx tailwindcss -i ./css/style.css -o ./dist/output.css 

This will output a tailwind-*.log file that gives you a log about what files Tailwind has scanned.

[youradds]

OMG now I feel dumb! That debug option helped (good to know for the future as well). But the issue was:

@source "../../../.cgi-bin/admin/templates/2024/**/*.html";

Notice . before cgi-bin ... duh! It should be:

@source "../../../cgi-bin/admin/templates/2024/**/*.html";

I'll do more testing tomorrow, but I think thats sorted it. Thank you so much!