{"_id":"@digitaliseringsbyran/tailwindcss-screens-in-dom","_rev":"2-215c46a0cc7133f8fc4c029961fbad2b","name":"@digitaliseringsbyran/tailwindcss-screens-in-dom","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@digitaliseringsbyran/tailwindcss-screens-in-dom","version":"0.1.0","description":"Expose the active tailwind screen to the DOM.","repository":{"type":"git","url":"git+https://github.com/Digitaliseringsbyran/tailwindcss-screens-in-dom.git"},"main":"index.js","keywords":["tailwind","tailwindcss","tailwind css","tailwindcss-plugin","plugin","screens","screen","active","breakpoint"],"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"homepage":"https://digitaliseringsbyran.se","bugs":{"url":"https://github.com/digitaliseringsbyran/tailwindcss-screens-in-dom/issues"},"author":{"name":"Digitaliseringsbyrån"},"license":"ISC","gitHead":"fe0ccea2ba3201bb4e21f7a420e128d4238668ed","_id":"@digitaliseringsbyran/tailwindcss-screens-in-dom@0.1.0","_nodeVersion":"10.14.2","_npmVersion":"6.8.0","dist":{"integrity":"sha512-5byU/AgKn8x9b1yBfFEDOKih9Hhjtwpxio+MuHSxMwlUVTLlthKQXxwOo1yinxFHsHCb4tZ1rljwYDAo4Ve6PQ==","shasum":"47ebe3ddc5b4609a66992eb591717c2857b12e69","tarball":"https://registry.npmjs.org/@digitaliseringsbyran/tailwindcss-screens-in-dom/-/tailwindcss-screens-in-dom-0.1.0.tgz","fileCount":3,"unpackedSize":3166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdVRrPCRA9TVsSAnZWagAA3FQP+gLWp80oc4B3o3SgX+zS\n90FmPcNd4iQp/tbBcgEH7L5/6DlqRK6XRuReetaAuIylF9IrNTk1qDMZnCBK\nU+i1oUZaRwKWzeqsOnOOH/gNDP9CeAigkavNzVv+fqYGudpTEbvodJAb/wLr\nHkj4HN1mYNUfJoqVo/3TO1E7M2Wl4GC6RGkbXGTNxYdGfeUZgeje1o8GlbuD\nSWhG82tqt8d/X+YeUF16vB0je/stqxAGL+YWZ6FvBRiN2Cu0b1kdzNxb8fPG\nutb/xZcby3CPeKYmnr5D5/jOcu0rL/Y182PB1o725qdIPs2PIME2/C8G/MRB\n0S6t1Z/iMRuEt9hYPPYV3q1Q4kktX4j9l7lFIUC+7ROexP2yMrV5BrCciqlJ\nc/+tcc2P35auKymmYGX0kuxGgy04ea6rj9m2x8Sd7Xy08Fk0VS2JC004eBSs\nq30hqEuh0rBLwecCMmoj4Y1F+F60yzhHLL0M8v8/ALxsBLSjkujQBVnND5Rs\nYYM/7CYqtYgajiP7nz1wY2IH9NQ5YIgjow+swhFytGSe3PgFZryLCoG1izIn\nSBVHh8HTPujiqIj0a9emsXamESjLSORT7ygJ/n2UNxC1QoRgL8iIzqy812wX\nRkIE0V/0K7t5Em59PkODEHE4kGewzPTepFzWcZrD6mVbdB9G87lSvxT2/EdG\nnraF\r\n=qpLn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDH01R7UkMgBSvZicAYtjHxTx6WZ0TTY/38hmVRHPjz3gIhAMKsr459a1lSg8aITAgC3Hv1R1Tpt+IVYEBbY0S3JszB"}]},"maintainers":[{"name":"albinmartinsson","email":"albin@digitaliseringsbyran.se"},{"name":"sebastiansson","email":"sebastian.marcusson@gmail.com"},{"name":"oh","email":"hello@davidohl.in"}],"_npmUser":{"name":"oh","email":"hello@davidohl.in"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tailwindcss-screens-in-dom_0.1.0_1565858510325_0.8871818668546643"},"_hasShrinkwrap":false},"0.1.1":{"name":"@digitaliseringsbyran/tailwindcss-screens-in-dom","version":"0.1.1","description":"Expose the active tailwind screen to the DOM.","repository":{"type":"git","url":"git+https://github.com/Digitaliseringsbyran/tailwindcss-screens-in-dom.git"},"main":"index.js","keywords":["tailwind","tailwindcss","tailwind css","tailwindcss-plugin","plugin","screens","screen","active","breakpoint"],"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"homepage":"https://digitaliseringsbyran.se","bugs":{"url":"https://github.com/digitaliseringsbyran/tailwindcss-screens-in-dom/issues"},"author":{"name":"Digitaliseringsbyrån"},"license":"ISC","gitHead":"9e6ab96653ecbcad97c494e0f347707d30a38363","_id":"@digitaliseringsbyran/tailwindcss-screens-in-dom@0.1.1","_nodeVersion":"10.14.2","_npmVersion":"6.8.0","dist":{"integrity":"sha512-WukAq/gWKFmoIWJqqqz8JvTEOr6PAtQrE7qGKnIoGb3sMKaY2Nh+5Dd9S0bXKXTeA5A8aVbDBz2AjP/Z5fVZ9g==","shasum":"0303b29a2f41822ceb9f8f7b902a8ea14889e0c3","tarball":"https://registry.npmjs.org/@digitaliseringsbyran/tailwindcss-screens-in-dom/-/tailwindcss-screens-in-dom-0.1.1.tgz","fileCount":3,"unpackedSize":3221,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdVRxrCRA9TVsSAnZWagAAtFIP/1F1OohQsIz0pC7ZSLfl\n6IoCoAext/x6A7Ep3Fm2FeSv1SHrJZIhsM+uQlRWOd2FKGIzBCWGOXiQZ3f8\nC06erxXK5GPCSS0fVaGxTUwzzQZF8Xl1aPEiNnHdlNXS7Y1yNg50PC7Tq2BN\ng9GhofK/0muzK2UVghIoj88S5WzpcY+h4ssX/e+wk0FMKicOVwkdYtVPIjKS\nuxWIW9Y8IEwvvCFeH9zdhvCq1Yf8M744VdJkZ9Qg16x2zSAjjEOxiQSXITSX\nzXelsYFKOOYdHqylBtR7RS87Pf8RZCDmcXLyL9HVRx7mpbU4857nUaokps/P\nT8fbgvlklVPx198W3FQ4BMumKtvTbecwfs4O/M4odXROH77mYFZaCse25q66\n3z7d9yCN4aEFWcPmY2q8bzVsVadbctJIAV9qcqbXwi1m/34dFlvRysYlWM6n\n4F3yVcGwtf4CRA1TkEnP2U4yCsb2yF/rwpJau53qmckOk+tSTxW3syWGtiv0\nN/sq+qdsx33J8TVWUiaGWZJ36U7/WsVAg4SGbA4iT26rGxfbVm7FROb3y8At\nhjHkd3+ReslSyj+oHFiFjmFdM0m3sjW7fRMEeHfUX4XiesNUDxc88nxl7TtD\nRDrePIjhJ3bYkaIGjJXNBkLq4yNuNHzSIvyGG+2b916CylZEFk9gGxwIqc9T\nmCdY\r\n=f/LU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID1EiRn2iNZ0wVguMDfkpIIfuD5q7ITx9P4WvXFEE4/cAiA2lQqWDs4JBHb2rHHGoxM5338zf0N6dLaNpfbHR7nYBA=="}]},"maintainers":[{"name":"albinmartinsson","email":"albin@digitaliseringsbyran.se"},{"name":"oh","email":"hello@davidohl.in"},{"name":"sebastiansson","email":"sebastian.marcusson@gmail.com"}],"_npmUser":{"name":"oh","email":"hello@davidohl.in"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tailwindcss-screens-in-dom_0.1.1_1565858922917_0.27660769102493354"},"_hasShrinkwrap":false}},"time":{"created":"2019-08-15T08:41:50.100Z","0.1.0":"2019-08-15T08:41:50.468Z","modified":"2022-04-05T04:37:39.713Z","0.1.1":"2019-08-15T08:48:43.069Z"},"maintainers":[{"name":"albinmartinsson","email":"albin@digitaliseringsbyran.se"},{"name":"oh","email":"hello@davidohl.in"},{"name":"sebastiansson","email":"sebastian.marcusson@gmail.com"}],"description":"Expose the active tailwind screen to the DOM.","homepage":"https://digitaliseringsbyran.se","keywords":["tailwind","tailwindcss","tailwind css","tailwindcss-plugin","plugin","screens","screen","active","breakpoint"],"repository":{"type":"git","url":"git+https://github.com/Digitaliseringsbyran/tailwindcss-screens-in-dom.git"},"author":{"name":"Digitaliseringsbyrån"},"bugs":{"url":"https://github.com/digitaliseringsbyran/tailwindcss-screens-in-dom/issues"},"license":"ISC","readme":"# tailwindcss-screens-in-dom\n\nExpose the active tailwind screen (like `sm`, `md`) in `body:before`, allowing you to use the value in Javascript. [Read more](https://github.com/AllThingsSmitty/css-breakpoints-in-js)\n\n## Installation\n\n```\n$ npm install @digitaliseringsbyran/tailwindcss-screens-in-dom --save-dev\n```\n\n## Usage\nAdd the plugin to the `plugins` array in your tailwind config.\n\n```js\nplugins: [\n  // ...\n  require('@digitaliseringsbyran/tailwindcss-screens-in-dom')()\n]\n```\n\n### Options\nYou can pass an object to override the default settings.\n\n```js\n// Default options\n\nplugins: [\n  require('@digitaliseringsbyran/tailwindcss-screens-in-dom')({\n    noScreen: 'xs' // Viewports below the smallest defined screen.\n  })\n]\n```\n\n## Access the active screen in Javascript\nAccessing the value in plain Javascript is [explained here](https://github.com/AllThingsSmitty/css-breakpoints-in-js#importing-the-breakpoints-into-javascript).\n\n### React\nA example hook that returns the active screen as a string:\n\n#### useTailwindScreen.js\n```js\nimport { useState, useEffect } from 'react'\n\nexport default () => {\n  const isClient = typeof window === 'object'\n\n  function getScreen() {\n    return window\n      .getComputedStyle(document.querySelector('body'), ':before')\n      .getPropertyValue('content')\n      .replace(/\"|'/g, '')\n  }\n\n  const initialState = isClient ? getScreen() : ''\n  const [screen, setScreen] = useState(initialState)\n\n  useEffect(() => {\n    if (!isClient) {\n      return false\n    }\n\n    function handleResize() {\n      setScreen(getScreen())\n    }\n\n    window.addEventListener('resize', handleResize)\n    return () => window.removeEventListener('resize', handleResize)\n  }, [])\n\n  return screen\n}\n````\n\n#### Component\n```js\nimport React from 'react'\nimport useTailwindBreakpoint from './useTailwindBreakpoint'\n\nconst ActiveScreen => {\n  const screen = useTailwindBreakpoint()\n  \n  return (\n      <span>{screen}</span>\n  )\n}\n\nexport default ActiveScreen\n```\n","readmeFilename":"readme.md"}