Tailwind CSS와 함께 Next.js 시작하기
테일윈드 CSS는 매우 인기 있는 개발자 친화적인 유틸리티 우선 CSS 프레임워크입니다. 테일윈드CSS를 사용해 본 적이 없다면 문서를 참조하세요.
프로젝트 만들기
아직 설정하지 않은 경우 새 Next.js 프로젝트를 생성하여 시작하세요. 가장 일반적인 방법은 Create Next App를 사용하는 것입니다.
npx create-next-app@latest my-project --typescript --eslint
cd my-project
Tailwind CSS 설치하기
npm을 통해 Tailwind에 필요한 tailwindcss와 피어 종속 요소를 설치합니다.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
필수 패키지를 성공적으로 설치했으면 이제 필요한 구성 파일을 생성할 수 있습니다.
구성
프로젝트를 추가하기 위해 필요한 설정 파일은 두 개입니다.
- tailwind.config.js
- postcss.config.js
init 명령을 실행하면 tailwind.config.js와 postcss.config.js이 모두 생성됩니다.
npx tailwindcss init -p
템플릿 경로 구성하기
tailwind.config.js 파일에 모든 템플릿 파일의 경로를 추가합니다. 이 파일은 프로젝트에서 스타일을 구성하는 데 사용되는 테일윈드 설정 파일입니다.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
테일윈드 CSS의 공식 문서에서 구성 옵션에 액세스할 수 있습니다.
https://tailwindcss.com/docs/configuration
CSS에 Tailwind 지시어 추가하기
다음 단계는 styles/global.css의 글로벌 CSS 파일에 필요한 @tailwind 지시문을 추가하는 것입니다.
global.css 파일에 다음과 같이 Tailwind의 레이어에 대한 @tailwind 지시문을 추가합니다.
@tailwind base;
@tailwind components;
@tailwind utilities;
다른 스타일링을 사용하고 싶지 않다면 애플리케이션에서 다른 스타일을 모두 제거하거나 테일윈드를 제거하면 됩니다.
이제 애플리케이션을 테스트할 수 있습니다! 🎉
프로젝트에서 Tailwind 사용 시작하기
애플리케이션 pages/index.js 파일에 코드를 작성합니다.
Tailwind의 유틸리티 클래스를 사용하여 콘텐츠의 스타일을 지정합니다.
export default function Home() {
return (
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
)
}
빌드 프로세스 시작
npm run dev`로 빌드 프로세스를 실행합니다.
이 글이 마음에 드셨다면 투표와 리블로그를 눌러 저의 글을 더 많은 분들과 공유해주세요. 그리고 이와 같은 콘텐츠를 더 보고 싶으시다면 @anpigon을 팔로우해주세요.
읽어주셔서 감사합니다!
티스토리에서 작성하였습니다.
원본 글: https://anpigon.tistory.com/262