Tailwind CSS 톺아보기
프로젝트 목표
- Tailwind CSS를 임의의 TypeScript Next 프로젝트에 적용
- Tailwind CSS 디자인 패턴에 대한 기초적인 이해
- Tailwind CSS 디자인 시스템에 대한 기초적인 이해
완성본 미리 보기
- https://design-cho-sh.vercel.app/tailwind-docs/chatbubble
- https://design-cho-sh.vercel.app/tailwind-docs/case-study-card
- https://design-cho-sh.vercel.app/tailwind-docs/user-email-form
원본 자료
#0 프로젝트 설정
- 기초적인 TypeScript Next App 설정
yarn create next-app --typescript
./styles/*
삭제pages/_app.tsx
CSS 관련 코드 삭제 (또는 아래와 같이 입력)
import type { AppProps } from 'next/app'
const App = ({ Component, pageProps }: AppProps) => <Component {...pageProps} />
export default App
pages/index.tsx
CSS 관련 코드 삭제 (또는 아래와 같이 입력)
import Head from 'next/head'
const index = () => (
<>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<h1>H1 Title</h1>
</>
)
export default index
#1 Tailwind를 Next에 추가
- 필수 요소 설치
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
- 다음 명령으로
tailwind.config.js
와postcss.config.js
생성
yarn tailwindcss init -p
- 사용하지 않은 Style 코드에 대한 삭제 옵션 추가
module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
- 최종적으로 Tailwind CSS를
pages/_app.tsx
에 추가
import type { AppProps } from 'next/app'
import 'tailwindcss/tailwind.css'
const App = ({ Component, pageProps }: AppProps) => <Component {...pageProps} />
export default App
#2 디자인 코드 분석
1. Chat Bubble
https://design-cho-sh.vercel.app/tailwind-docs/chatbubble
import Image from 'next/image'
import Favicon from '../../public/favicon.ico'
const chatbubble = () => (
<div className="flex h-screen">
<div className="p-6 max-w-sm m-auto bg-white rounded-xl shadow-md flex items-center space-x-4 border-2">
<div className="flex-shrink-0 relative">
<div className="h-12 w-12">
<Image layout="fill" src={Favicon} alt="Favicon" />
</div>
</div>
<div>
<div>
<div className="text-xl font-medium text-black">Chat Bubble</div>
<p className="text-gray-500">You have a message.</p>
</div>
</div>
</div>
</div>
)
export default chatbubble