chore(docs): minor updates

reegodev · Feb 11, 2024 · 570a81a · 570a81a
1 parent 99767c1
commit 570a81a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/packages/docs/src/guide/frameworks/bootstrap.md b/packages/docs/src/guide/frameworks/bootstrap.md
@@ -23,13 +23,13 @@ For backwards compatibility reasons, bootstrap 3 is also aliased as just `bootst
 ```js
 import { useGrid } from 'vue-screen'
 
-const grid = useGrid('bootstrap') // Bootstrap 3 grid
+const grid = useGrid('bootstrap') // Will use Bootstrap 3 grid
 ```
 
 ```js
 import VueScreen from 'vue-screen'
 
-createApp().use(VueScreen, 'bootstrap') // Bootstrap 3 grid
+createApp().use(VueScreen, 'bootstrap') // Will use Bootstrap 3 grid
 ```
 
 Your grid object will contain the following properties:

diff --git a/packages/docs/src/guide/frameworks/custom.md b/packages/docs/src/guide/frameworks/custom.md
@@ -70,3 +70,23 @@ createApp().use(VueScreen, {
   }
 })
 ```
+
+::: danger
+Remember that your breakpoints must be in ascending order. If you need to add a breakpoint between two existing ones, you have to be explicit:
+
+```js
+import VueScreen from 'vue-screen'
+import tailwindConfig from './tailwind.config.js'
+
+createApp().use(VueScreen, {
+  grid: {
+    sm: tailwindConfig.theme.screens.sm,
+    md: tailwindConfig.theme.screens.md,
+    lg: tailwindConfig.theme.screens.lg,
+    lg-x: '1100px',
+    xl: tailwindConfig.theme.screens.xl,
+    2xl: tailwindConfig.theme.screens.2xl,
+  }
+})
+```
+:::