Next Emotion Twin Typescript

Next Emotion Twin Typescript is a Next.js boilerplate that combines Emotion, Tailwind CSS, twin.macro, and TypeScript while preserving the SWC compiler, created by Dan (geonhwiii) for developers who want utility-first styling without losing build performance.

What is Next Emotion Twin Typescript?

Next Emotion Twin Typescript is a Next.js starter template that integrates Emotion for CSS-in-JS styling, Tailwind CSS utility classes through twin.macro, and TypeScript all in one pre-configured repository. It takes a blank Next.js scaffold and outputs a clean project structure with path aliases, reusable folders, and deployment hooks. The template targets Next.js v13.1.1, React v18.2.0, Tailwind CSS v3.2.4, and TypeScript v4.9.4, as shown by the badges in the README.

The core motivation is to let twin.macro work with the SWC compiler. Twin.macro normally forces a custom Babel setup which disables SWC; this project's withTwin.js file modifies the Next.js configuration so the SWC compiler stays active while twin.macro still processes Tailwind utilities.

Key Features

• SWC-preserving twin.macro — Includes a withTwin.js file that wires twin.macro into Next.js without custom Babel, so the SWC compiler remains enabled for faster builds.
• Path aliases configured — tsconfig.json pre-maps "@/pages/", "@/components/", "@/utils/", "@/styles/", "@/configs/", "@/constants/", "@/assets/", and "@/types/" so imports are short and consistent.
• Ready folder structure — Contains pages, components, configs, styles, types, assets (split into icons and images), libs, utils, constants, and public directories.
• One-click deployment — README includes Vercel and Netlify deploy buttons that clone and launch the project directly.
• Multiple scaffold commands — Can be initialized with npx degit geonhwiii/next-emotion-twin-typescript, npx create-next-app -e, or yarn create next-app.
• Styled with tw prop — Developers write Tailwind classes inside Emotion's css prop using twin.macro's tw template literal, e.g.:

<div css={tw`flex flex-col justify-center items-center`}>
  <div css={tw`text-center font-bold`}>Hello World!!!</div>
</div>

Who is it for?

Next Emotion Twin Typescript is for Next.js developers who prefer Tailwind's utility classes but also want the flexibility of Emotion's CSS-in-JS. It is also for development teams that need a standardized starting point with consistent folder organization and TypeScript from the beginning. Finally, it helps developers who want to avoid the custom Babel configuration that twin.macro would otherwise require.

What can you do with the template?

• Next.js developers: Scaffold a production-ready project with npx create-next-app -e https://github.com/geonhwiii/next-emotion-twin-typescript and run yarn install to get a styled, typed application foundation.
• Styling-heavy teams: Compose responsive utility classes and custom CSS in the same component using the tw directive inside Emotion's css prop, reducing context switching between stylesheets.
• Deployment-oriented users: Use the Vercel or Netlify deploy buttons to spin up a live instance of the starter in a few clicks.

How does the starter work?

After cloning the repository via degit or create-next-app, you install dependencies with yarn or npm install. The starter's withTwin.js file plugs twin.macro into Next.js's webpack configuration, enabling emotion and Tailwind processing through SWC. Then you can immediately start building components using the css prop and twin.macro's tw template literal.

FAQ

Does this template work with the SWC compiler?

Yes. The supplied withTwin.js configuration integrates twin.macro into Next.js without requiring a custom Babel setup, which preserves the SWC compiler for faster builds and loads.

How do I set up the path aliases?

The tsconfig.json already maps "@/" to several directories such as "@/components", "@/utils", "@/styles", and "@/configs". You can still customize the paths by editing the "paths" object in tsconfig.json.

Why use twin.macro instead of regular Tailwind?

Twin.macro lets you use Tailwind utility classes inside Emotion's css prop, giving you the convenience of utility-first styling with the power of CSS-in-JS, all without a runtime layer beyond Emotion.