Merge branch 'release/1.0.0'

docs/.vuepress/config.js

@@ -12,8 +12,8 @@ module.exports = {
       },
       {
         text: 'Plugins',
-        link: '/plugins/',
         items: [
+          { text: 'Breakpoint', link: '/plugins/breakpoint/' },
           { text: 'Debug outline', link: '/plugins/debug-outline/' },
           { text: 'Display', link: '/plugins/display/' },
           { text: 'Font-Face', link: '/plugins/font-face/' },

docs/configuration/readme.md

@@ -1,7 +1,7 @@
 ---
 sidebar: auto
 prev: /guide/
-next: /plugins/
+next: /plugins/breakpoint.html
 ---
 
 # Configuration
@@ -205,43 +205,12 @@ module.exports = {
 
 ## Plugins
 
-### Debug outline
-
-Our custom debug outline plugin is used without specific configuration, read its [documentation](/plugins/debug-outline.html) for more informations.
-
-### Display
-
-Our custom display plugin is used without specific configuration, read its [documentation](/plugins/display.html) for more informations.
-
-### Font-Face
-
-Our custom font-face plugin is used without specific configuration, read its [documentation](/plugins/font-face.html) for more informations.
-
-### Grid
-
-Our custom grid plugin is used without specific configuration, read its [documentation](/plugins/grid.html) for more informations.
-
-### Typography
-
-The typography plugin is used with the following configuration:
-
-```js{3-11}
-module.exports = {
-  plugins: [
-    require('tailwindcss-typography')({
-      ellipsis: true,
-      hyphens: true,
-      textUnset: true,
-      caps: true,
-      nums: true,
-      ligatures: true,
-      componentPrefix: 'type-',
-    }),
-  ],
-};
-```
-
-Read our [own documentation](/plugins/typography.html) on its usage and the [plugin's official documentation](https://github.com/benface/tailwindcss-typography#readme) for more informations.
+- [Breakpoint](/plugins/breakpoint.html) to exposes the `screens` configuration in the CSS
+- [Debug outline](/plugins/debug-outline.html) to help debug layout
+- [Display](/plugins/display.html) to fix a naming convention conflict between our [grid plugin](/plugins/grid.html) and the official [grid display](https://tailwindcss.com/docs/display/#grid)
+- [Font-Face](/plugins/font-face.html) to easily add custom `@font-face` declarations
+- [Grid](/plugins/grid.html) to add some grid classes
+- [Typography](/plugins/typography.html) to improve the typography utilities
 
 ---
 

docs/plugins/breakpoint.md

@@ -0,0 +1,34 @@
+---
+sidebar: auto
+prev: /configuration/
+next: ./debug-outline.html
+---
+
+# Breakpoint
+
+This plugin adds a `[data-breakpoint]` selector that exposes the current screen and the screens configuration in its `::before` and `::after` pseudo-elements.
+
+::: tip
+This plugin is developped to match our JS Toolkit `resize` service which exposes `breakpoint` and `breakpoints` props when a `[data-breakpoint]` element is found in the DOM.
+:::
+
+## Configuration
+
+The plugin can be configured with the `theme.breakpointPlugin` property:
+
+```js{3-5}
+module.exports = {
+  theme: {
+    breakpointPlugin: {
+      smallestBreakpointName: 'xxs',
+    },
+  },
+};
+```
+
+### `smallestBreakpointName`
+
+- Type: `String`
+- Default: `'xxs'`
+
+The name to use for the smallest breakpoint.

docs/plugins/debug-outline.md

@@ -1,6 +1,6 @@
 ---
 sidebar: auto
-prev: /plugins/
+prev: ./breakpoint.html
 next: ./display.html
 ---