$ start
yarn install
yarn dev
npm install
npm run dev
- next.js v 13 page route version
- tailwindcss + styledComponents + twin.macro
- dark toggle
- swc build
- next.js v 13 page route version
- tailwindcss + styledComponents + twin.macro
- dark toggle
- swc build
- tw, css, styled, className 을 사용해 스타일링 가능
export default function Home() {
return (
<>
<Head>
<title>Create Next App boiler template</title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={`${inter.className}`}>
<Style>
<ThemeToggle />
</Style>
<div
tw="bg-primary border border-gray-600 dark:border-gray-100 "
className="m-2 p-20" //margin 2px padding 20px
>
custom tailwind primary color
</div>
</main>
</>
);
}
const Style = tw.div`
bg-gradient-to-r
from-violet-500 to-fuchsia-50
rounded-sm
p-2 m-2
`;
ref:
https://fe-developers.kakaoent.com/2022/220303-tailwind-tips/