You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+8-3Lines changed: 8 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
# Tailwind CSS Breakpoints Inspector
2
-
A Tailwind CSS component that shows the currently active responsive breakpoint.
2
+
A Tailwind CSS plugin that shows the currently 'active' responsive breakpoint.
3
3
4
-
<imgsrc="screenshot.gif"width="534">
4
+
<imgsrc="screenshot.gif"width="100%">
5
5
6
6
## Install
7
7
@@ -32,7 +32,7 @@ No extra markup, no external ressources.
32
32
33
33
The indicator is only present during development.
34
34
35
-
Uner the hood we use svg for Tailwind logo and inspector render.
35
+
Uner the hood we use svg for Tailwind logo and inspector render. 🤩
36
36
37
37
## Customization
38
38
@@ -96,6 +96,7 @@ module.exports = {
96
96
],
97
97
}
98
98
```
99
+
In this case we recommand to adjust the svg width with `theme.breakpointsInspector.width` setting.
99
100
100
101
#### Ignore screens
101
102
@@ -115,3 +116,7 @@ module.exports = {
115
116
],
116
117
}
117
118
```
119
+
---
120
+
### Ideas
121
+
This plugin is inspired by
122
+
[Jon Sugar gist](https://gist.github.com/jonsugar/6bce22bd7d3673294caad36046c2b7cb) and [Joren Van Hee plugin](https://github.com/jorenvanhee/tailwindcss-debug-screens)
0 commit comments