{"bugs":{"url":"https://github.com/tw-in-js/twind/issues"},"dist":{"shasum":"734f9b46d5d5f982a6117710afbf4f754fda5554","tarball":"https://registry.npmjs.org/twind/-/twind-1.0.0-next.21.tgz","fileCount":15,"integrity":"sha512-6i9CnDKrtoyCXsa4XwcIF277B9g9+B8aekY8SaSS4cLaMadeJje7Xz8Vic9xwAVbtGvP5/3faNCTtPY567bJIA==","signatures":[{"sig":"MEUCIQCWIZdPIbAeM0d4tbrYpV2TE41CI4R1p0UQZIf1l97mZQIgDxVZZ9j0poS7c1Gt1xgUT0Nk9gxg4tR8BAJy3kbiljc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":437905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh7IAOCRA9TVsSAnZWagAAEGEQAIwU8KMQTSNO4BtaEgc4\nKRfuZ6DDMHFfAaRWfUZt2zycQHVIrP/MO/b43XuNESr02CCO6QUbRX088T/a\nOmYLwx30sPUZNXce+Dys3JvOVyHhcc9r/XqTnNmpUdqgYAJCV4SgC3ivupxO\nJecze7PLBM6CPeb/VdeinAXHNQvDZi9kVcXpzUF+p72Vw69HvfqJBthmqYfu\n2YuBhTf6D5FzTgINV72Os7CusZcStgKCMcVYAniQD3Yxe5OHxf9muUkI0O79\nb6kVfTW+C8+q7l5fNjActJCcey+MCUhd95S9cP0WwNa/FIdRvTjQOTS+d1mI\nLdVt63rIJhExG0mddrq8KBB45pxZJlobGz6hWcuherznhfgv25LzvCp2kRZ7\ntxrdy8wVU2lfQ2s9aCr6ddipMEuXov9Rb1s8LidQpVXe1xjr31w2xCk1aHs9\nl3TLgFT9ophcoBgbDuELY6PLR2DFgn42FAa1LzZS8evELzeQ4109/vcQaOj4\n5WR6R+n+VWjKrT2nvAUGcEEUwOCHv7y7LhAusoTTg7smKtectYwT8QGKOeKN\nMVvQIBUw2g+pQimiPmsTPAHK6R4Q0iZTfJNG890YH+Om23fUo4Xn/kn9SEhH\nbtjT2ZNZ4kJQxTCugNzfdES/TXYCoPlNJF9BDPIx3CpkE/5ptF/XnYFI2+g2\nbQYt\r\n=Cbo1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./twind.cjs","name":"twind","type":"module","_from":"file:twind-1.0.0-next.21.tgz","types":"./twind.d.ts","unpkg":"./twind.global.js","author":{"url":"https://github.com/sastan","name":"Sascha Tandel"},"esnext":"./twind.esnext.js","module":"./twind.js","readme":"# twind\n\n---\n\n## READ THIS FIRST!\n\n**Twind v1 is still in beta. Expect bugs!**\n\n---\n\nUtility-first CSS without any build step right in the browser or any other environment like Node.js, deno, workers, ...\n\nTwind does **not** include any core utilities — use one of the existing presets:\n\n- [@twind/tailwind](https://www.npmjs.com/package/@twind/tailwind) to get a full Tailwind v3 experience. It includes the following presets:\n\n  - [@twind/preset-autoprefix](https://www.npmjs.com/package/@twind/preset-autoprefix)\n  - [@twind/preset-tailwind](https://www.npmjs.com/package/@twind/preset-tailwind)\n\n- [@twind/preset-tailwind-forms](https://www.npmjs.com/package/@twind/preset-tailwind-forms) to get Tailwind v3 and Tailwind Forms.\n- [@twind/preset-ext](https://www.npmjs.com/package/@twind/preset-ext)\n\nOr write your own variants and rules.\n\nTake a look at [examples](https://github.com/tw-in-js/twind/tree/next/examples).\n\nAdditionally we provides several integrations:\n\n- [@twind/sveltekit](https://www.npmjs.com/package/@twind/sveltekit) — [SvelteKit](https://kit.svelte.dev)\n\n## Usage\n\n```sh\nnpm install twind@next\n```\n\n```js\nimport { setup } from 'twind'\n\n// You must call setup at least once, but can call it multiple times\nsetup({\n  /* options */\n})\n```\n\nIncase you are not using SSR to inject the pre-computed styles apply the following pattern to prevent [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content):\n\n```html\n<body class=\"!block\" style=\"display: none\">\n  <!-- ... -->\n</body>\n```\n\nIf any element has the `autofocus` attribute, Twind will focus it after all styles are injected.\n\n<details><summary>Usage with a script tag</summary>\n\nAdd this line to your `index.html`:\n\n```html\n<head>\n  <script src=\"https://cdn.jsdelivr.net/npm/twind@next\" crossorigin></script>\n  <script>\n    twind.setup({\n      /* options */\n    })\n  </script>\n</head>\n```\n\nTo add presets add their ids to the script `src` attribute:\n\n```html\n<head>\n  <!-- ... -->\n  <script\n    src=\"https://cdn.jsdelivr.net/npm/twind@next,npm/@twind/preset-tailwind@next\"\n    crossorigin\n  ></script>\n  <script>\n    twind.setup({\n      presets: [twind.presetTailwind()],\n      // ...\n    })\n  </script>\n  <!-- ... -->\n</head>\n```\n\n</details>\n\n## API\n\n> If you are using the `script` tag these methods are available via the `twind` global object (eg `twind.setup`).\n\n### `setup(config [, sheet [, target]])`\n\nInitializes Twind and can be called as many times as you want.\n\n```js\nimport { setup } from 'twind'\n\n// can be called as many times as you want.\nconst tw = setup({\n  /* config */\n})\n// -> tw === import { tw } from 'twind'\n```\n\n### `tw(...tokens)` — the current Twind instance\n\n```js\nimport { tw } from 'twind'\n\ntw`underline`\ntw({ underline: true })\n\ntw.theme('colors.blue.500', 'blue')\n```\n\n### `cx`\n\n```js\nimport { cx } from 'twind'\n\n// Set a className\nelement.className = cx`\n  underline\n  /* multi\n    line\n    comment\n  */\n  hover:focus:!{\n    sm:{italic why}\n    lg:-{px}\n    -mx-1\n  }\n  // Position\n  !top-1 !-bottom-2\n  text-{xl black}\n`\n```\n\n### `shortcut`\n\nTDB\n\n### `css`\n\nTDB\n\n### `style`\n\nTDB\n\n### `extract(html, tw)`\n\nUsed for static HTML processing (usually to provide SSR support for your javascript-powered web apps) — powered by [consume(html, tw)](#consumehtml-tw)\n\n**Note**: Consider using [inject](#injecthtml-tw) instead.\n\n**Note**: This clears the Twind instance before processing the HTML.\n\n```js\nimport { setup, extract, tw } from 'twind'\n\n// can be in a different file — but should be called at least once\nsetup({\n  /* config */\n})\n\nfunction render() {\n  const { html, css } = extract(renderApp(), tw)\n\n  // inject as last element into the head\n  return html.replace('</head>', `<style data-twind>${css}</style></head>`)\n}\n```\n\n## Low-Level API\n\n### `twind`\n\nTDB\n\n### `consume(html, tw)`\n\nUsed for static HTML processing (usually to provide SSR support for your javascript-powered web apps)\n\n1. parse the markup and process element classes with the provided Twind instance\n2. update the class attributes _if_ necessary\n3. return the HTML string with the final element classes\n\n```js\nimport { setup, tw, consume, stringify } from 'twind'\n\n// can be in a different file — but should be called at least once\nsetup({\n  /* config */\n})\n\nfunction render() {\n  const html = renderApp()\n\n  // clear all styles\n  tw.clear()\n\n  // generated markup\n  const markup = comsume(html, tw)\n\n  // create CSS\n  const css = stringify(tw.target)\n\n  // inject as last element into the head\n  return markup.replace('</head>', `<style data-twind>${css}</style></head>`)\n}\n```\n","engines":{"node":">=12.4"},"exports":{".":{"node":{"import":"./twind.mjs","require":"./twind.cjs"},"types":"./twind.d.ts","esnext":"./twind.esnext.js","module":"./twind.js","script":"./twind.global.js","default":"./twind.js"},"./package.json":"./package.json"},"funding":{"url":"https://opencollective.com/twind","type":"opencollective"},"license":"MIT","_npmUser":{"name":"sastan","email":"s.tandel@me.com"},"homepage":"https://twind.dev","jsdelivr":"./twind.global.js","keywords":["twind","tw-in-js","tailwind","tailwindcss","tailwind-in-js"],"_resolved":"/home/runner/work/twind/twind/packages/twind/dist/twind-1.0.0-next.21.tgz","_integrity":"sha512-6i9CnDKrtoyCXsa4XwcIF277B9g9+B8aekY8SaSS4cLaMadeJje7Xz8Vic9xwAVbtGvP5/3faNCTtPY567bJIA==","deprecated":"use @twind/core instead","repository":{"url":"git+https://github.com/tw-in-js/twind.git","type":"git","directory":"packages/twind"},"_npmVersion":"8.1.2","description":"The core engine without any presets.","directories":{},"maintainers":[{"name":"sastan","email":"s.tandel@me.com"},{"name":"lukejacksonn","email":"lukejacksonn@gmail.com"}],"sideEffects":false,"_nodeVersion":"16.13.2","contributors":[{"url":"lukejacksonn.github.io","name":"Luke Jackson"},{"url":"https://github.com/sastan","name":"Sascha Tandel"}],"dependencies":{"csstype":"^3.0.10","@swc/helpers":"^0.3.2"},"publishConfig":{"tag":"next","access":"public","directory":"dist"},"_hasShrinkwrap":false,"peerDependencies":{"typescript":"^4.4.0"},"peerDependenciesMeta":{"typescript":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/twind_1.0.0-next.21_1642889229921_0.4083590284081844","host":"s3://npm-registry-packages"},"_id":"twind@1.0.0-next.21","version":"1.0.0-next.21"}