Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Document inline stylesheets #3355

Merged
merged 9 commits into from
Jun 6, 2023
24 changes: 24 additions & 0 deletions src/content/docs/en/guides/styling.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -514,6 +514,30 @@ You can apply global styles to your Markdown content by adding [`<style>` tags](

If you are using Tailwind, the [typography plugin](https://tailwindcss.com/docs/typography-plugin) can be useful for styling Markdown.

## Production

### Bundle control

When Astro builds your site for production deployment it combines your CSS into chunks. Each page on your site is its own chunk, and additionally, CSS that is shared between multiple pages is further split off into their own chunks for reuse.

In each of your HTML files there will be `<link rel="stylesheet">` tags added, one for each of the chunks that the pages needs.

Sites with a large number of pages and many different shared styles can lead to many stylesheet requests and affect site performance. You can configure the `inlineStylesheets` option to reduce the number of these requests by putting (minimized) stylesheets into a `<style>` tag rather than request them externally.

```js
import { defineConfig } from 'astro/config';

export default defineConfig({
build: {
inlineStylesheets: 'auto'
}
});
```

The `'auto'` option will inline only the stylesheets that are below the `vite.build.assetsInlineLimit` threshold, reducing the number of requests for smaller sheets. Larger stylesheets, such as global ones used by all pages, will still be fetched externally and cached. This option provides a balance between the number of stylesheets loaded and the amount of styles that can be cached between pages.
sarah11918 marked this conversation as resolved.
Show resolved Hide resolved

You can also set this option to `'always'` which will inline all stylesheets.

## Advanced

:::caution
Expand Down