From e66cb72e1c23c4aac0d16aa3da174bf74d8c478f Mon Sep 17 00:00:00 2001
From: Saya <chu121su12@gmail.com>
Date: Tue, 7 Jun 2022 05:35:24 +0800
Subject: [PATCH] docs: add section about using preflight (#1071)

---
 README.md | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/README.md b/README.md
index dbaff16937..f3096aa718 100644
--- a/README.md
+++ b/README.md
@@ -391,6 +391,26 @@ import '@unocss/reset/tailwind.css'
 
 Learn more at [@unocss/reset](https://github.com/unocss/unocss/tree/main/packages/reset).
 
+### Preflight
+
+You can inject raw css as preflights from the configuration. The resolved `theme` is available to customize the css.
+
+<!--eslint-skip-->
+
+```ts
+preflights: [
+  {
+    getCss: ({ theme }) => `
+      * {
+        color: ${theme.colors.gray?.[700] ?? '#333'}
+        padding: 0;
+        margin: 0;
+      }
+    `
+  }
+]
+```
+
 ### Custom Variants
 
 [Variants](https://windicss.org/utilities/general/variants.html) allows you to apply some variations to your existing rules. For example, to implement the `hover:` variant from Tailwind:
@@ -493,6 +513,17 @@ This will generate:
 .m-2 { margin: 0.5rem; }
 ```
 
+Layering also can be set on each preflight:
+
+```ts
+preflights: [
+  {
+    layer: 'my-layer',
+    getCss: async () => (await fetch('my-style.css')).text(),
+  },
+]
+```
+
 You can control the order of layers by:
 
 <!--eslint-skip-->