geonhwiii / next-emotion-twin-typescript

🚀 Getting Started

1. Clone Project with CLI

# 1. with npx degit
npx degit geonhwiii/next-emotion-twin-typescript %{PROJECT_NAME}%

# 2. with npx example
npx create-next-app %{PROJECT_NAME}% -e https://github.com/geonhwiii/next-emotion-twin-typescript

# 3. with yarn example
yarn create next-app %{PROJECT_NAME}% -e https://github.com/geonhwiii/next-emotion-twin-typescript

2. After cloning, run this command: yarn or yarn install

# move to project
$ cd project_name

# install packages
$ yarn
or
$ npm istall

💡 Why should I use this project?

When we start NextJS Proejct with tailwindcss & emotion, we need twin.macro.

But twin.macro currently require custom barbel, which stops using the SWC compiler.

So we can start the proejct with SWC compiler using withTwin.js.

This project helps you get started most comfortably! 🔥

🗂️ Basic Folder

• pages
• components
• configs
• styles
• types
• assets
  • icons
  • images
• libs
• utils
• constants
• public

⭐️ Tip

1. In tsconfig.json, The paths is set to "@/***/*".

// you can customize it!
"baseUrl": ".",
"paths": {
  "@/pages/*": ["pages/*"],
  "@/components/*": ["components/*"],
  "@/utils/*": ["utils/*"],
  "@/common/*": ["common/*"],
  "@/styles/*": ["styles/*"],
  "@/configs/*": ["configs/*"],
  "@/constants/*": ["constants/*"],
  "@/assets/*": ["assets/*"],
  "@/types/*": ["types/*"]
}

//  you can import file like this
import GlobalStyles from '@/styles/GlobalStyles';

2. Use tailwindcss with emotion!

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

🧑🏻‍💻 Authors

🇰🇷 Dan (단님) (@geonhwiii)

🔗 References:

• Nextjs
• TailwindCSS
• EmotionJS
• Twin.macro
• Vercel