https://github.com/ben-rogerson/twin.examples

Packed with examples for different frameworks, this repo helps you get started with twin a whole lot faster.
https://github.com/ben-rogerson/twin.examples

emotionjs styled-components tailwind tailwindcss twin

Last synced: 6 days ago
JSON representation

Packed with examples for different frameworks, this repo helps you get started with twin a whole lot faster.

• Host: GitHub
• URL: https://github.com/ben-rogerson/twin.examples
• Owner: ben-rogerson
• Created: 2020-09-02T10:00:58.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-04-11T03:21:20.000Z (10 months ago)
• Last Synced: 2025-01-08T14:28:09.052Z (13 days ago)
• Topics: emotionjs, styled-components, tailwind, tailwindcss, twin
• Language: TypeScript
• Homepage:
• Size: 11.2 MB
• Stars: 464
• Watchers: 5
• Forks: 129
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        


  

    

  

  

    

  





    Packed with examples for different frameworks,
this repo helps you get started with twin.macro a whole lot faster.



    

    

    



---

[](#examples)

## Examples

### App build tools and libraries

- **Parcel**
[styled-components](https://github.com/ben-rogerson/twin.examples/tree/master/react-styled-components) / [emotion](https://github.com/ben-rogerson/twin.examples/tree/master/react-emotion) / [emotion (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/react-emotion-typescript)

- **Webpack**
[styled-components (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/webpack-styled-components-typescript) / [emotion (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/webpack-emotion-typescript)

- **Preact**
[styled-components](https://github.com/ben-rogerson/twin.examples/tree/master/preact-styled-components) / [emotion](https://github.com/ben-rogerson/twin.examples/tree/master/preact-emotion) / [goober](https://github.com/ben-rogerson/twin.examples/tree/master/preact-goober)

- **Create React App**
[styled-components](https://github.com/ben-rogerson/twin.examples/tree/master/cra-styled-components) / [emotion](https://github.com/ben-rogerson/twin.examples/tree/master/cra-emotion)

- **Vite**
[styled-components (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/vite-styled-components-typescript) / [emotion (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/vite-emotion-typescript) / [solid (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/vite-solid-typescript) 🎉

- **Jest / React Testing Library**
[styled-components (ts) / emotion (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/jest-testing-typescript)

### Advanced frameworks

- **Next.js**
[styled-components](https://github.com/ben-rogerson/twin.examples/tree/master/next-styled-components) / [styled-components (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/next-styled-components-typescript) / [emotion](https://github.com/ben-rogerson/twin.examples/tree/master/next-emotion) / [emotion (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/next-emotion-typescript) / [stitches (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/next-stitches-typescript)

- **T3 App**
[styled-components (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/t3-styled-components-typescript) 🎉 /

  [emotion (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/t3-emotion-typescript) 🎉

- **Blitz.js**
[emotion (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/blitz-emotion-typescript)

- **Gatsby**
[styled-components](https://github.com/ben-rogerson/twin.examples/tree/master/gatsby-styled-components) / [emotion](https://github.com/ben-rogerson/twin.examples/tree/master/gatsby-emotion)

### Component libraries

- **Storybook**
[styled-components (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/storybook-styled-components-typescript) / [emotion](https://github.com/ben-rogerson/twin.examples/tree/master/storybook-emotion) / [emotion (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/storybook-emotion-typescript) 🎉

- **yarn/npm workspaces + Next.js + shared ui components**
[styled-components](https://github.com/ben-rogerson/twin.examples/tree/master/component-library-styled-components)

- **Yarn workspaces + Rollup**
[emotion](https://github.com/ben-rogerson/twin.examples/tree/master/component-library-emotion)

- [**HeadlessUI** (ts)](https://github.com/ben-rogerson/twin.examples/tree/master/headlessui-typescript)

🎉 : Fresh example

[](#contributions)

## Contributions

Contributions are welcome!

Feel free to report any issues or add a new example to this list via a PR.

[](#community)

## Community

[Drop into our Discord server](https://discord.gg/Xj6x9z7) for announcements, help and styling chat.