Merge pull request jorenvanhee#7 from julianstark999/indicator-prefix

Add ability to modify indicator prefix
vormkracht10 · Nov 23, 2020 · 96b9e95 · 96b9e95
2 parents b94fdbb + 84b6459
commit 96b9e95
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -103,3 +103,21 @@ module.exports = {
   ],
 }
 ```
+
+#### Prefix
+
+Modify the debug label prefix with the `prefix` configuration option.
+
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    debugScreens: {
+      prefix: 'screen: ',
+    },
+  },
+  plugins: [
+    require('tailwindcss-debug-screens'),
+  ],
+}
+```
diff --git a/index.js b/index.js
@@ -2,6 +2,7 @@ module.exports = function ({ addComponents, theme }) {
   const screens = theme('screens');
   const userStyles = theme('debugScreens.style', {});
   const ignoredScreens = theme('debugScreens.ignore', [])
+  const prefix = theme('debugScreens.prefix', 'screen: ');
 
   const defaultPosition = ['bottom', 'left'];
   const position = theme('debugScreens.position', defaultPosition);
@@ -21,7 +22,7 @@ module.exports = function ({ addComponents, theme }) {
       backgroundColor: '#000',
       color: '#fff',
       boxShadow: '0 0 0 1px #fff',
-      content: `'screen: _'`,
+      content: `'${prefix}_'`,
     }, userStyles),
   };
 
@@ -30,7 +31,7 @@ module.exports = function ({ addComponents, theme }) {
     .forEach(([screen]) => {
       components[`@screen ${screen}`] = {
         '.debug-screens::before': {
-          content: `'screen: ${screen}'`,
+          content: `'${prefix}${screen}'`,
         },
       };
     });