Twin + Webpack + Emotion + TypeScript

This example uses Webpack to build a React App written in TypeScript and styled with Twin + Emotion.

• To add the css prop, we use @emotion/babel-preset-css-prop and set the jsxImportSource in tsconfig.json.
• The react preset uses the automatic runtime that doesn’t require a react import to use jsx.
• Included is the twin companion plugin, babel-plugin-twin which enables the tw prop without having to import twin (optional).
• Types for the styled and css imports pass through twin from emotion in types/twin.d.ts.

Download this example using degit

npx degit https://github.com/ben-rogerson/twin.examples/webpack-emotion-typescript folder-name

From within the new folder, run npm install, then npm start to start the dev server.

Customization

• View the config options →
• Customizing the tailwind config →

Next steps

Learn how to work with twin

• The prop styling guide - A must-read guide to level up on prop styling
• The styled component guide - A must-read guide on getting productive with styled-components

Learn more about emotion

• Emotion’s css prop
• Emotion’s css import
• Emotion’s styled import