0.1.1 ā¢ Published 1 year ago
next-emotion-twin-typescript v0.1.1
š Getting Started
- 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 next-emotion-twin-typescript -e https://github.com/geonhwiii/next-emotion-twin-typescript
# 3. with yarn example
yarn create next-app next-emotion-twin-typescript -e https://github.com/geonhwiii/next-emotion-twin-typescript
- After cloning, run this command:
yarn
oryarn install
# move to project
$ cd project_name
# install packages
$ yarn
or
$ npm istall
š” Why should I use this project?
When we start
NextJS
Proejct withtailwindcss
&emotion
, we needtwin.macro
.But
twin.macro
currently require custombarbel
, which stops using theSWC 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
- 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';
- Use
tailwindcss
withemotion
!
<div css={tw`flex flex-col justify-center items-center`}>
<div css={tw`text-center font-bold`}>Hello World!!!</div>
</div>
š§š»āš» Authors
š°š· Dan (ėØė) (@geonhwiii)