Initial commit

Author: jorenvanhee

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+insert_final_newline = true
+trim_trailing_whitespace = true
+end_of_line = lf
+indent_style = space
+indent_size = 2

index.js

@@ -0,0 +1,37 @@
+module.exports = function ({ addComponents, theme }) {
+  const screens = theme('screens');
+  const userStyles = theme('debugScreens.style', {});
+
+  const defaultPosition = ['bottom', 'left'];
+  const position = theme('debugScreens.position', defaultPosition);
+  const positionY = position[0] || defaultPosition[0];
+  const positionX = position[1] || defaultPosition[1];
+
+  const components = {
+    '.debug-screens::before': Object.assign({
+      position: 'fixed',
+      zIndex: '2147483647',
+      [positionY]: '0',
+      [positionX]: '0',
+      padding: '.3333333em .5em',
+      fontSize: '12px',
+      lineHeight: '1',
+      fontFamily: 'sans-serif',
+      backgroundColor: '#000',
+      color: '#fff',
+      boxShadow: '0 0 0 1px #fff',
+      content: `'screen: _'`,
+    }, userStyles),
+  };
+
+  Object.entries(screens).forEach(([screen]) => {
+    components[`@screen ${screen}`] = {
+      '.debug-screens::before': {
+        content: `'screen: ${screen}'`,
+      },
+    };
+  });
+
+  addComponents(components);
+}
+

package.json

@@ -0,0 +1,11 @@
+{
+  "name": "tailwindcss-debug-screens",
+  "version": "0.1.0",
+  "description": "A Tailwind CSS component that shows the currently active screen (responsive breakpoint).",
+  "main": "index.js",
+  "author": "Joren Van Hee",
+  "license": "MIT",
+  "peerDependencies": {
+    "tailwindcss": "^1.0"
+  }
+}