Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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 styles that can be cached between pages.

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

## Advanced

:::caution
Expand Down