{"bugs":{"url":"https://github.com/tw-in-js/twind/issues"},"dist":{"shasum":"316ffffbb56d290da91e9972d189bef3af026b9b","tarball":"https://registry.npmjs.org/twind/-/twind-1.0.0-next.38.tgz","fileCount":15,"integrity":"sha512-YqX58zGWiMNmFb4adVKfA9GEwUj7NbS7BTJTbM27qc+e0u5kOHTYLgfFqiKe40XOw40VgVdGwCjwdiXKTc8vKw==","signatures":[{"sig":"MEUCIQDtkWAcKLwFKBlDwV8k/AfUARzt4BEqXR0lIsdohFgfbwIgCPuGmpQyN3ExmJzM2ho0GAuq3308BKYOQHSOZwQZ09c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":995010,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic5XNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpxYA//a9KCB1MgTZ5ms/tewwg4470UGyWybXWb1ZETI1pcsN7cPnra\r\nXFQSQXalbT3v575OwJ7tdyXJirj2ZUL3nieUJReAyHa0hs4xZqzgHneqC3So\r\nDyM95TCup1BQPoVDiE7bZNJnbn+nsrScuXO/lqEnKDgfdU7+HaBFKMnewsJq\r\nk1S6GGzemifrNqw1FgYC4LWyHXW/zveveNzsMNAwbeLnH90HtEruny/zQVTi\r\naXdhlVrkYXfRQXPa1Ojift17CJ9QmhCWoGUkxnnIADDjdbhvEAuCi3gTcQYa\r\nUVg7Z0V1mlGgSOohA1ENmQ1x94K4Xk44LTryIs1B7+SVkGlb3/cbSnXTjeyD\r\n1uDsoeh5VvfVOiI0E6yokf9dMcwWk1LRY27ca/wMp0PpP09SS996kjqrgGjq\r\nd0/2VynapENU4XLeS9KwVqNhPYdZmLuZ81QD/OlyHLScQo/BLwGWL0E7jGUl\r\noWh4BbgmkWWuKOA+3dHEZQBX15M/gJ1KuesbGUZ6uPPozMQYsB1Kps3sb8uk\r\nG3pcX8eqhuu4wMwdU5Bki5vRKDm5mIIJIKqy3iakvke6csx3Dq76ldyKxOpd\r\nz+bbtInyhx1d1W03xRmeKAu4Yfx/+9sYlolvr3kHgrf0g7ojRQVsrTCj5sg2\r\n8rYMgIlc9QeZR1zhmG0Xp2n/rAIEb2YQKCA=\r\n=2Z/A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./twind.cjs","name":"twind","type":"module","_from":"file:twind-1.0.0-next.38.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 [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":"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":"/home/runner/work/twind/twind/packages/twind/dist/twind-1.0.0-next.38.tgz","_integrity":"sha512-YqX58zGWiMNmFb4adVKfA9GEwUj7NbS7BTJTbM27qc+e0u5kOHTYLgfFqiKe40XOw40VgVdGwCjwdiXKTc8vKw==","deprecated":"use @twind/core instead","repository":{"url":"git+https://github.com/tw-in-js/twind.git","type":"git","direction":"packages/twind"},"_npmVersion":"8.5.5","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.15.0","dependencies":{"csstype":"^3.0.10","@swc/helpers":"^0.3.3"},"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.38_1651742157256_0.5058724676425612","host":"s3://npm-registry-packages"},"_id":"twind@1.0.0-next.38","version":"1.0.0-next.38"}