Skip to content

Commit ee7fe31

Browse files
Add ability to modify indicator prefix
1 parent a0b27a9 commit ee7fe31

File tree

2 files changed

+22
-2
lines changed

2 files changed

+22
-2
lines changed

README.md

+18
Original file line numberDiff line numberDiff line change
@@ -103,3 +103,21 @@ module.exports = {
103103
],
104104
}
105105
```
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+
```

index.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ module.exports = function ({ addComponents, theme }) {
88
const positionY = position[0] || defaultPosition[0];
99
const positionX = position[1] || defaultPosition[1];
1010

11+
const indicatorPrefix = theme('debugScreens.indicatorPrefix', 'screens: ');
12+
1113
const components = {
1214
'.debug-screens::before': Object.assign({
1315
position: 'fixed',
@@ -21,7 +23,7 @@ module.exports = function ({ addComponents, theme }) {
2123
backgroundColor: '#000',
2224
color: '#fff',
2325
boxShadow: '0 0 0 1px #fff',
24-
content: `'screen: _'`,
26+
content: `'${indicatorPrefix}_'`,
2527
}, userStyles),
2628
};
2729

@@ -30,7 +32,7 @@ module.exports = function ({ addComponents, theme }) {
3032
.forEach(([screen]) => {
3133
components[`@screen ${screen}`] = {
3234
'.debug-screens::before': {
33-
content: `'screen: ${screen}'`,
35+
content: `'${indicatorPrefix}${screen}'`,
3436
},
3537
};
3638
});

0 commit comments

Comments
 (0)