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
+15-102
Original file line number
Diff line number
Diff line change
@@ -6,26 +6,24 @@ A Tailwind CSS component that shows the currently active screen (responsive brea
6
6
7
7
<imgsrc="screenshot.png"width="534">
8
8
9
+
> [!NOTE]
10
+
> Docs for Tailwind CSS v1, v2 & v3 can be found [here](https://github.com/jorenvanhee/tailwindcss-debug-screens/tree/v2).
11
+
9
12
## Install
10
13
11
-
Requires **Tailwind v1.0** or higher.
14
+
Requires **Tailwind v4.0** or higher.
12
15
13
16
1. Install the plugin:
14
17
15
18
```bash
16
19
npm install tailwindcss-debug-screens --save-dev
17
20
```
18
21
19
-
2. Add it to your `tailwind.config.js` file:
22
+
2. Add the plugin to your main `style.css` file:
20
23
21
-
```js
22
-
// tailwind.config.js
23
-
module.exports= {
24
-
//...
25
-
plugins: [
26
-
require('tailwindcss-debug-screens'),
27
-
]
28
-
}
24
+
```diff
25
+
@import "tailwindcss";
26
+
+ @plugin "tailwindcss-debug-screens";
29
27
```
30
28
31
29
3. Add the class `debug-screens` to your `<body>` tag:
@@ -50,98 +48,13 @@ module.exports = {
50
48
51
49
## Customization
52
50
53
-
You can customize this plugin in the `theme.debugScreens` section of your `tailwind.config.js` file.
54
-
55
-
### Ignore screens
56
-
57
-
To ignore a specific screen (for instance [dark mode](https://tailwindcss.com/docs/dark-mode)), add the screen name to the `ignore` configuration array. `dark` is ignored by default.
58
-
59
-
```js
60
-
// tailwind.config.js
61
-
module.exports= {
62
-
theme: {
63
-
debugScreens: {
64
-
ignore: ['dark'],
65
-
},
66
-
},
67
-
plugins: [
68
-
require('tailwindcss-debug-screens'),
69
-
],
70
-
}
71
-
```
72
-
73
-
### Position
74
-
75
-
The first item of the position configuration array can be `top` or `bottom`, the second item can be `left` or `right`.
76
-
77
-
```js
78
-
// tailwind.config.js
79
-
module.exports= {
80
-
theme: {
81
-
debugScreens: {
82
-
position: ['bottom', 'left'],
83
-
},
84
-
},
85
-
plugins: [
86
-
require('tailwindcss-debug-screens'),
87
-
],
88
-
}
89
-
```
90
-
91
-
### Styles
92
-
93
-
Take a look at the [index.js](index.js) file to see all the default styles.
94
-
95
-
```js
96
-
// tailwind.config.js
97
-
module.exports= {
98
-
theme: {
99
-
debugScreens: {
100
-
style: {
101
-
backgroundColor:'#C0FFEE',
102
-
color:'black',
103
-
// ...
104
-
},
105
-
},
106
-
},
107
-
plugins: [
108
-
require('tailwindcss-debug-screens'),
109
-
],
110
-
}
111
-
```
112
-
113
-
### Prefix
114
-
115
-
Modify the debug label prefix with the `prefix` configuration option.
116
-
117
-
```js
118
-
// tailwind.config.js
119
-
module.exports= {
120
-
theme: {
121
-
debugScreens: {
122
-
prefix:'screen: ',
123
-
},
124
-
},
125
-
plugins: [
126
-
require('tailwindcss-debug-screens'),
127
-
],
128
-
}
129
-
```
51
+
You can customize this plugin by using the following options when registering the plugin.
130
52
131
-
### Selector
132
-
133
-
Modify the debug element selector with the `selector` configuration option.
0 commit comments