Next.js에서 Tailwind CSS를 사용하는 방법

Tailwind CSS는 모든 프로젝트에 포함될 수 있는 CSS 프레임워크입니다. Next.js 프로젝트에 Tailwind css를 포함하거나 프로젝트 또는 작업 중인 모든 작업에 반응할 수 있습니다.

Tailwind CSS는 유틸리티 우선을 기반으로 한다는 점에서 bootstrap, material 등과 같은 다른 CSS 프레임워크와 다릅니다.

즉, 버튼, 카드 등과 같은 미리 디자인된 구성 요소에 초점을 맞추지 않습니다. HTML 파일을 남기지 않고 처음부터 사용자 지정 웹 사이트를 구축할 수 있는 저수준 유틸리티 클래스입니다.

이 tailwind CSS 튜토리얼에서는 Next.js 프로젝트에 Tailwind CSS를 포함하는 방법을 살펴보겠습니다.

내용의 테이블

Next.js 설정

Tailwind CSS 설치

구성 파일 설정

순풍 정화

응용 프로그램에 Tailwind 포함/Next.js에서 Tailwind CSS를 가져오는 방법

결론

Next.js 설정

next.js에 tailwind CSS를 추가하려면 먼저 next.js 애플리케이션을 설정해야 합니다. 이미 설정했다면 이 단계를 건너뛸 수 있습니다. 그렇지 않은 경우 이 단계에 따라 설정해야 합니다.

이 순풍 CSS 자습서를 계속하려면 next.js 버전 10 이상을 실행해야 한다는 점도 주목할 가치가 있습니다.

즐겨찾는 터미널에서 다음 명령을 실행하여 next.js를 설정하세요.

암호:

npx create-next-app Building-tailwind-app

원하는 이름으로 응용 프로그램을 부를 수 있습니다. 명령에서 애플리케이션을 "Building-tailwind-app"라고 했습니다.

계속하려면 응용 프로그램의 루트로 이동해야 합니다. 터미널에서 다음 명령을 실행하여 이를 수행할 수 있습니다.

암호:

cd Building-tailwind-app

Tailwind CSS 설치

tailwind CSS 프레임워크를 사용하려면 세 가지 중요한 패키지가 필요합니다. Tailwind, postcss 및 autoprefixer.

여기에 이 ​​세 가지 패키지를 설치할 것입니다. 터미널에서 이 명령을 실행하여 npm을 사용할 수 있습니다.

암호:

npm install –D tailwindcss@latest postcss@latest autoprefixer@latest

또는 실을 사용하여

yarn add –D tailwindcss@latest postcss@latest autoprefixer@latest.

구성 파일 설정

다음으로 해야 할 일은 구성 파일을 설정하는 것입니다. 하나는 tailwind용이고 다른 하나는 Postcss용입니다.

PostCSS는 JavaScript로 CSS를 변환하기 위한 도구입니다. 애플리케이션의 루트에 이러한 파일을 생성하려면 터미널에서 다음 명령을 실행하기만 하면 됩니다.

암호:

npx tailwind init –p

마찬가지로 tailwind.config.js 및 postcss.config.js가 애플리케이션의 루트에 추가됩니다.

순풍 정화

tailwind CSS를 제거한다는 것은 HTML에서 사용되지 않은 모든 클래스를 제거하는 것을 의미합니다. 이를 통해 애플리케이션을 더 빠르게 로드할 수 있습니다.

Tailwind 스타일을 제거하기 위해. 다음 코드로 생성한 tailwind.config.js를 업데이트해야 합니다.

암호:

Module.exports = {
Purge: [‘./pages/**/*.{js,ts,jxs,tax}’]
darkMode : false,
theme : {
           extend : { },
},
Variants : {
      extend: { },
},
plugins: []
}

위의 코드에서 Tailwind에 페이지 폴더에서 사용한 스타일을 확인하도록 지시하고 있습니다.

이것은 또한 JS와 TypeScript 파일을 모두 다룰 것입니다. PugeCSS를 기본 스타일이나 구성 요소 클래스가 아닌 순풍 CSS의 유틸리티에만 적용하는 것이 항상 현명합니다. 이는 Next.js 프로젝트에서 작업할 때 실수로 중요한 기본 스타일을 제거하지 않도록 하기 위한 것입니다.

애플리케이션에 Tailwind 포함/Next.js에서 Tailwind CSS를 어떻게 가져오나요?

이제 남은 것은 Next.js 애플리케이션에 Tailwind CSS를 포함하는 것입니다. 이렇게 하려면 다음 코드로/pages/-app.js를 업데이트하기만 하면 됩니다.

암호:

Import "tailwindcss/tailwind.css"

Function myApp({ Component, pageProps }) {
Return <Component {…pageProps } />
}

Export default MyApp

이제 /pages/index.js 응용 프로그램에서 스타일을 제거하려고 합니다. 이제 남은 것은 Next.js 애플리케이션을 빌드하는 것입니다. 보시다시피 Next.js 애플리케이션에 Tailwind CSS를 쉽게 포함할 수 있습니다.

결론

오늘의 Tailwind CSS 자습서에서는 Tailwind CSS를 Next.js 프로젝트 또는 애플리케이션으로 가져오는 방법을 설명했습니다. 또한 Tailwind CSS를 Next.js 프로젝트에 포함하는 프로세스를 단계별로 진행했습니다. 나는 당신이 튜토리얼을 즐겼기를 바랍니다.