Tailwind Integration with Page With Astro.glob method!

[santoshyadav-29]

What version of astro are you using?

v2.0

Are you using an SSR adapter? If so, which one?

Netlify

What package manager are you using?

npm

What operating system are you using?

Window

What browser are you using?

Edge

Describe the Bug

I was creating a personal blog website using Astro. I used TailwindCSS for styling. I had almost finished my work and was about to deploy but something weird happened.
Suddenly the styles from one of my pages (Blog List page) where I brought all my blog content got removed. All of my other pages are working fine with Tailwind, but this one does not seem to work. I tried rewriting the code and reconfiguring the system but it was the same. As if it worked on my local machine when I just save it and then when I try to restart the server, the page styles got removed.

What's the expected result?

The styles on the blog page should be consistent with the rest of the website, as seen on other pages that use Tailwind CSS.

Link to Minimal Reproducible Example

https://github.com/santoshyadav-29/Blog

Participation

• I am willing to submit a pull request for this issue.

[natemoo-re]

A few things could be happening here.

• https://github.com/santoshyadav-29/Blog/blob/54d42d48222b7b122e0be3bd27d910dddf3fba1a/src/pages/bloglist.astro#L37C1-L41C9 could be problematic, since the global styles should already be injected by the tailwind() integration. You're likely including two copies of Tailwind.
• Astro.glob has an unfortunate side-effect of including all referenced CSS on the page, regardless of if it's rendered or not. See 🐛 BUG: CSS generated by Astro.glob is included on all pages #3816 for more information. We recommend using the Content Collections API because it solves this.

I would try following the most recent version of our blog starter template which uses content collections and see if that fixes things?

[santoshyadav-29]

I tried putting the tailwind directives thinking it would solve the issue, even without tailwind directives the results are same. I founds out about content collection API and it works and I will be fine by that but this unexpected behaviour might ruin many developers experience, even in the official astro documentation there is the tutorial on creating a blog with the same approach without CSS so it is a common think to do for people. I hope this problem will be resolved and if not an official note should be provided.

[matthewp]

Closing, content collections is the recommendation to prevent style bleed and similar issues. Astro.glob will likely be deprecated in a future Astro version for this reason.