Document inline stylesheets

[matthewp]

What kind of changes does this PR include?

• New or updated content

Description

• Adds a section to the Styles & CSS page which explains inlining.

[netlify]

✅ Deploy Preview for astro-docs-2 ready!

Name	Link
🔨 Latest commit	e7aa122
🔍 Latest deploy log	https://app.netlify.com/sites/astro-docs-2/deploys/647f647f71e8ca000830ccaa
😎 Deploy Preview	https://deploy-preview-3355--astro-docs-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[sarah11918]

I like this section, and I like it where it's located!

One quick thing that comes to mind is whether there are any Tailwind implications with this, since so many people will be using Tailwind. Is there something relevant or useful to say about whether or how this does/doesn't include/affect your Tailwind styles?

[lilnasy]

Stylesheets created by tailwind would be treated the same as those created by any other source.

[sarah11918]

Thanks @lilnasy - do you think some people might need to explicitly hear that? Is this something a Tailwind user might be wondering? Or is it obvious enough. I'm trying to think of what might be going through someone's mind. 😄

[lilnasy]

I haven't used tailwind, so I can't get in the mindset of a user. Whether a reassurance is necessary depends on whether astro+tailwind users are used to things not working without fiddling.

[lilnasy]

Although even if that's not the case, two lines couldn't hurt.

This configuration applies to styles authored in <style> tags inside .astro files, css files imported into astro or framework components, and tailwind classes used by server-side rendered framework components. Tailwind classes from client-only react, solid, and svelte components don't contribute to bundled CSS as they are compiled into css rules in the browser. As always, .css files in the public folder are not processed.

[matthewp]

@sarah11918 Tailwind is a large stylesheet most of the time, so most likely it will be bundled in a chunk that is not inlined. Unless you are only using a small amount of Tailwind styles. So it would be retrieved externally and cached between pages, which is what you want.

[sarah11918]

This looks great, @matthewp! I tried some minor text changes but of course as always, may have lost some nuance in the process. See what you think, and take what you like!

[sarah11918]

Good to go!

[ElianCodes]

Oh waw! I love this!! 🚀