consecteturquia
Version:
25 lines (18 loc) • 8.13 kB
Markdown
# Examples
Some examples of how to use the Twind. These are great for reproductions of issues.
| Example | Try it live at | Description |
| ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Basic](https://github.com/tw-in-js/twind/tree/main/examples/basic) | [Stackblitz](https://stackblitz.com/fork/github/tw-in-js/twind/tree/main/examples/basic) • [Codesandbox](https://githubbox.com/tw-in-js/twind/tree/main/examples/basic) | using [@twind/preset-autoprefix](https://github.com/tw-in-js/twind/tree/main/packages/preset-autoprefix) and [@twind/preset-tailwind](https://github.com/tw-in-js/twind/tree/main/packages/preset-tailwind) |
| [Playground](https://github.com/tw-in-js/twind/tree/main/examples/playground) | [Stackblitz](https://stackblitz.com/fork/github/tw-in-js/twind/tree/main/examples/playground) • [Codesandbox](https://githubbox.com/tw-in-js/twind/tree/main/examples/playground) | using using all presets |
## Packages
| Example | Try it live at | Description |
| ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Tailwind Forms](https://github.com/tw-in-js/twind/tree/main/examples/tailwind-forms) | [Stackblitz](https://stackblitz.com/fork/github/tw-in-js/twind/tree/main/examples/using-tailwind-forms) • [Codesandbox](https://githubbox.com/tw-in-js/twind/tree/main/examples/using-tailwind-forms) | using [@twind/preset-autoprefix](https://github.com/tw-in-js/twind/tree/main/packages/preset-autoprefix) and [@twind/preset-tailwind](https://github.com/tw-in-js/twind/tree/main/packages/preset-tailwind) and [@twind/preset-tailwind-forms](https://github.com/tw-in-js/twind/tree/main/packages/preset-tailwind-forms) |
| [Twind CDN](https://github.com/tw-in-js/twind/tree/main/examples/using-twind-cdn) | [Stackblitz](https://stackblitz.com/fork/github/tw-in-js/twind/tree/main/examples/using-twind-cdn) • [Codesandbox](https://githubbox.com/tw-in-js/twind/tree/main/examples/using-twind-cdn) | using [@twind/cdn](https://github.com/tw-in-js/twind/tree/main/packages/cdn) |
## Frameworks
| Example | Try it live at | Description |
| -------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Gatsby](https://github.com/tw-in-js/twind/tree/main/examples/gatsby) | ~~[Stackblitz](https://stackblitz.com/fork/github/tw-in-js/twind/tree/main/examples/with-gatsby)~~ • [Codesandbox](https://githubbox.com/tw-in-js/twind/tree/main/examples/with-gatsby) | with [Gatsby](https://www.gatsbyjs.com) using [gatsby-plugin-twind](https://github.com/tw-in-js/twind/tree/main/packages/with-gatsby), [@twind/preset-autoprefix](https://github.com/tw-in-js/twind/tree/main/packages/preset-autoprefix) and [@twind/preset-tailwind](https://github.com/tw-in-js/twind/tree/main/packages/preset-tailwind) |
| [Next.js](https://github.com/tw-in-js/twind/tree/main/examples/with-next) | [Stackblitz](https://stackblitz.com/fork/github/tw-in-js/twind/tree/main/examples/with-next) • [Codesandbox](https://githubbox.com/tw-in-js/twind/tree/main/examples/with-next) | with [Next.js](https://nextjs.org) using [@twind/with-next](https://github.com/tw-in-js/twind/tree/main/packages/with-next), [@twind/preset-autoprefix](https://github.com/tw-in-js/twind/tree/main/packages/preset-autoprefix) and [@twind/preset-tailwind](https://github.com/tw-in-js/twind/tree/main/packages/preset-tailwind) |
| [Remix](https://github.com/tw-in-js/twind/tree/main/examples/with-remix) | [Stackblitz](https://stackblitz.com/fork/github/tw-in-js/twind/tree/main/examples/with-remix) • [Codesandbox](https://githubbox.com/tw-in-js/twind/tree/main/examples/with-remix) | with [Remix](https://remix.run) using [@twind/with-remix](https://github.com/tw-in-js/twind/tree/main/packages/with-remix), [@twind/preset-autoprefix](https://github.com/tw-in-js/twind/tree/main/packages/preset-autoprefix) and [@twind/preset-tailwind](https://github.com/tw-in-js/twind/tree/main/packages/preset-tailwind) |
| [SvelteKit](https://github.com/tw-in-js/twind/tree/main/examples/with-sveltekit) | [Stackblitz](https://stackblitz.com/fork/github/tw-in-js/twind/tree/main/examples/with-sveltekit) • [Codesandbox](https://githubbox.com/tw-in-js/twind/tree/main/examples/with-sveltekit) | with [SvelteKit](https://kit.svelte.dev) using [@twind/with-sveltekit](https://github.com/tw-in-js/twind/tree/main/packages/with-sveltekit), [@twind/preset-autoprefix](https://github.com/tw-in-js/twind/tree/main/packages/preset-autoprefix) and [@twind/preset-tailwind](https://github.com/tw-in-js/twind/tree/main/packages/preset-tailwind) |