fyfirman / explore-twin-webpack

Webpack + styled-components + TypeScript

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

• 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 styled-components in types/twin.d.ts.

Download this example using degit

npx degit https://github.com/ben-rogerson/twin.examples/webpack-styled-components-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 styled-components

• The css prop
• The css import
• The styled import