{"bugs":{"url":"https://github.com/tw-in-js/twind/issues"},"dist":{"shasum":"0543cf617962d450afc28e5c4b29079a20efa47f","tarball":"https://registry.npmjs.org/twind/-/twind-1.0.0-next.39.tgz","fileCount":15,"integrity":"sha512-EJE33M/VjWtmvW4bxc0r3dOaYIIHoFlBYJtQwZNpGcZgSGjTno2K4fOHrf6MTkPeS0IAiG9Gah3w+wyDcRFhYQ==","signatures":[{"sig":"MEQCIB/itdheK4q4z3fxgXOzVuw2TaJnL8H+AjgpqyVFKhUOAiBOLVbpbrxAPPLqSs3FV+nxbsbBpu9QlhPnRiRdQvDqHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1040437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjO1hwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqN8w//e1EmGrxMMpZJUnoxajFZf69YUoGutBXl7LN9GwRBSNRbq4ZE\r\nr6aKNGeLVKjZbYXqOJ9xMvk0OBXcmqHX1uPvd6WvJvsJBmwEx9UVhQFRJk+F\r\nDvWdsmpEwegmXBHe+twJxv9Uwzgf2EEkQotsodyuxbm1NDLNSXZHRk3AaUm6\r\nGa0k8iCpcyRLQaW0lEgVk9vh0P/wQgHr3iv2EVUYhcHl+74rX3hFYrz9hTyl\r\nrUglclBjX9esiw0WXZ8INWtjRz4K1esQw1vCNsVn0ry2bh2LLmAGHqkE+ICQ\r\n1qAGFWq9Z22ijVvXfwVE27JBItD223nyf8/nxbo8roGjq9bQ5Klw01S7E7S7\r\nlAAngHlvXQ7v6GAS//o9doD5aVHJZyEVgaywvokNIXCVIfyyt7WquysSuZ8R\r\nVBXxOrvajLYnqYWekedv6GKNm9aIT7a/+l6a+RVhzG67PRPje4pHStUTsvEm\r\nwCqiEr5yyedZLSu+CnDtNO0omLlZKG4LF5oPNrZQh5GJ0PEYU2LcI/OSbMIB\r\nQ9jHy18asep6zas0FnV+FvhClfwxhlpLvWH5wEkIhv6YDYFimxwat5i7saKS\r\nVMKwf9xcZOVgDdMO5dmpM+3dZeVyYkR7O0vSwpvycdStOeyKCR+B2FOufuwe\r\n+ISUIFYIqWurWOyjhse/5rT2co1fcsTcpf0=\r\n=qniu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./twind.cjs","name":"twind","type":"module","_from":"file:twind-1.0.0-next.39.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 [![MIT License](https://flat.badgen.net/github/license/tw-in-js/twind)](https://github.com/tw-in-js/twind/blob/next/LICENSE) [![Latest Release](https://flat.badgen.net/npm/v/twind/next?icon=npm&label&cache=10800&color=blue)](https://www.npmjs.com/package/twind/v/next) [![Github](https://flat.badgen.net/badge/icon/tw-in-js%2Ftwind%23twind?icon=github&label)](https://github.com/tw-in-js/twind/tree/next/packages/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 or more of the existing presets:\n\n- [@twind/preset-autoprefix](https://github.com/tw-in-js/twind/tree/next/packages/preset-autoprefix)\n- [@twind/preset-ext](https://github.com/tw-in-js/twind/tree/next/packages/preset-ext)\n- [@twind/preset-tailwind](https://github.com/tw-in-js/twind/tree/next/packages/preset-tailwind)\n- [@twind/preset-tailwind-forms](https://github.com/tw-in-js/twind/tree/next/packages/preset-tailwind-forms) to get Tailwind v3 and Tailwind Forms.\n\nHere are some examples of how to write your own rules or variants:\n\n- preset-tailwind: [rules](https://github.com/tw-in-js/twind/blob/next/packages/preset-tailwind/src/rules.ts) and [variants](https://github.com/tw-in-js/twind/blob/next/packages/preset-tailwind/src/variants.ts)\n- preset-ext: [rules](https://github.com/tw-in-js/twind/blob/next/packages/preset-ext/src/rules.ts) and [variants](https://github.com/tw-in-js/twind/blob/next/packages/preset-ext/src/variants.ts)\n\nAdditionally we provides several integrations:\n\n- [Gatsby](https://github.com/gatsbyjs/gatsby) — [gatsby-plugin-twind](https://github.com/tw-in-js/twind/tree/next/packages/gatsby-plugin-twind)\n- [Next.js](https://kit.svelte.dev) — [@twind/with-next](https://github.com/tw-in-js/twind/tree/next/packages/with-next)\n- [Remix](https://remix.run) — [@twind/with-remix](https://github.com/tw-in-js/twind/tree/next/packages/with-remix)\n- [SvelteKit](https://kit.svelte.dev) — [@twind/with-sveltekit](https://github.com/tw-in-js/twind/tree/next/packages/with-sveltekit)\n\nTo get you started, take a look at the [examples](https://github.com/tw-in-js/twind/tree/next/examples).\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 [inline](#inlinehtml-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, consume, stringify, 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 = renderApp()\n\n  // remember global classes\n  const restore = tw.snapshot()\n\n  // generated markup\n  const markup = consume(html)\n\n  // create CSS\n  const css = stringify(tw.target)\n\n  // restore global classes\n  restore()\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":">=14.15.0"},"exports":{".":{"node":{"import":"./twind.mjs","require":"./twind.cjs"},"types":"./twind.d.ts","esnext":"./twind.esnext.js","module":"./twind.js","script":"./twind.global.js","default":{"import":"./twind.mjs","require":"./twind.cjs"}},"./package.json":"./package.json"},"funding":[{"url":"https://opencollective.com/twind","type":"Open Collective"},{"url":"https://github.com/sponsors/tw-in-js","type":"Github Sponsor"}],"license":"MIT","_npmUser":{"name":"sastan","email":"s.tandel@me.com"},"homepage":"https://twind.style","jsdelivr":"./twind.global.js","keywords":["twind","tw-in-js","tailwind","tailwindcss","tailwind-in-js"],"_resolved":"/tmp/f80f1c69e2247b8cd1d002e6261bcf56/twind-1.0.0-next.39.tgz","_integrity":"sha512-EJE33M/VjWtmvW4bxc0r3dOaYIIHoFlBYJtQwZNpGcZgSGjTno2K4fOHrf6MTkPeS0IAiG9Gah3w+wyDcRFhYQ==","deprecated":"use @twind/core instead","repository":{"url":"git+https://github.com/tw-in-js/twind.git","type":"git","direction":"packages/twind"},"_npmVersion":"8.15.0","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.17.0","dependencies":{"csstype":"^3.0.10","@swc/helpers":"^0.4.11"},"publishConfig":{"tag":"next","access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"typescript":"^4.8.4"},"peerDependenciesMeta":{"typescript":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/twind_1.0.0-next.39_1664833648114_0.17110097864914886","host":"s3://npm-registry-packages"},"_id":"twind@1.0.0-next.39","version":"1.0.0-next.39"}