File tree 2 files changed +22
-2
lines changed
2 files changed +22
-2
lines changed Original file line number Diff line number Diff line change @@ -103,3 +103,21 @@ module.exports = {
103
103
],
104
104
}
105
105
```
106
+
107
+ #### Screen Prefix
108
+
109
+ To modify the prefix for the screens, add the ` indicatorPrefix ` configuration.
110
+
111
+ ``` js
112
+ // tailwind.config.js
113
+ module .exports = {
114
+ theme: {
115
+ debugScreens: {
116
+ indicatorPrefix: ' screen: ' ,
117
+ },
118
+ },
119
+ plugins: [
120
+ require (' tailwindcss-debug-screens' ),
121
+ ],
122
+ }
123
+ ```
Original file line number Diff line number Diff line change @@ -8,6 +8,8 @@ module.exports = function ({ addComponents, theme }) {
8
8
const positionY = position [ 0 ] || defaultPosition [ 0 ] ;
9
9
const positionX = position [ 1 ] || defaultPosition [ 1 ] ;
10
10
11
+ const indicatorPrefix = theme ( 'debugScreens.indicatorPrefix' , 'screens: ' ) ;
12
+
11
13
const components = {
12
14
'.debug-screens::before' : Object . assign ( {
13
15
position : 'fixed' ,
@@ -21,7 +23,7 @@ module.exports = function ({ addComponents, theme }) {
21
23
backgroundColor : '#000' ,
22
24
color : '#fff' ,
23
25
boxShadow : '0 0 0 1px #fff' ,
24
- content : `'screen: _'` ,
26
+ content : `'${ indicatorPrefix } _'` ,
25
27
} , userStyles ) ,
26
28
} ;
27
29
@@ -30,7 +32,7 @@ module.exports = function ({ addComponents, theme }) {
30
32
. forEach ( ( [ screen ] ) => {
31
33
components [ `@screen ${ screen } ` ] = {
32
34
'.debug-screens::before' : {
33
- content : `'screen: ${ screen } '` ,
35
+ content : `'${ indicatorPrefix } ${ screen } '` ,
34
36
} ,
35
37
} ;
36
38
} ) ;
You can’t perform that action at this time.
0 commit comments