From 7d0ecb1dfa0e2d19030082a72728f0808bb56253 Mon Sep 17 00:00:00 2001
From: Will Martin <contact@willmartian.com>
Date: Tue, 15 Aug 2023 18:23:42 -0400
Subject: [PATCH] [CL-103] add docs for Tailwind breakpoints (#6021)

* add tailwind breakpoints

* add docs page

* update docs

* rename docs file

* update config

* remove custom breakpoints

* update stories
---
 .../src/stories/responsive-design.mdx         | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 libs/components/src/stories/responsive-design.mdx

diff --git a/libs/components/src/stories/responsive-design.mdx b/libs/components/src/stories/responsive-design.mdx
new file mode 100644
index 00000000000..a54baf6a231
--- /dev/null
+++ b/libs/components/src/stories/responsive-design.mdx
@@ -0,0 +1,31 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Documentation/Responsive Design" />
+
+# Responsive Design
+
+Bitwarden supports the following breakpoints:
+
+| Breakpoint prefix | Minimum width |
+| ----------------- | ------------- |
+| `sm`              | 640px         |
+| `md`              | 768px         |
+| `lg`              | 1024px        |
+| `xl`              | 1280px        |
+| `2xl`             | 1536px        |
+
+These can be used to conditionally apply other Tailwind classes at specific screen sizes. Find more
+info in the [Tailwind docs](https://tailwindcss.com/docs/responsive-design).
+
+## Example
+
+```html
+<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
+<img class="tw-w-16 md:tw-w-32 lg:tw-w-48" src="..." />
+```
+
+<img
+  class="tw-w-16 md:tw-w-32 lg:tw-w-48"
+  alt="Bitwarden logo"
+  src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/Bitwarden_logo.svg/512px-Bitwarden_logo.svg.png"
+/>