# 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) |