Tailwind CSS V2.0을 Next.js 10으로 설정하는 방법

by 지오스콘 2021. 1. 22. IT정보

React 프로젝트에서 새로운 Tailwind CSS 및 Next.js 사용

2020 년 마지막 달에 몇 가지 훌륭한 프레임 워크 업데이트가 출시되었습니다. 첫 번째는 이미지를 자동으로 최적화하는 새로운 이미지 구성 요소와 같은 멋진 기능이 많이 포함 된 Next.js 10 릴리스였습니다.

둘째, 1.0 출시 후 18 개월 후 Tailwind 팀 은 CSS 프레임 워크 v2.0 을 출시 했습니다. 이 새로운 업데이트에는 새로운 색상 팔레트 및 다크 모드 지원 과 같은 많은 개선 사항이 포함되었습니다.

최신 버전의 Next.js를 Tailwind CSS와 함께 사용하는 것은 웹 응용 프로그램을 만들고 스타일을 지정하는 데 매우 강력한 조합입니다.

새 프로젝트를 설정하는 단계를 살펴 보겠습니다.

새 Next.js 프로젝트 시작

Yarn 을 설치했다고 가정 하고 터미널을 열고 yarn create next-app프로젝트 폴더에서 실행 하십시오.

다음 메시지가 표시됩니다.

What is your project named?

이름을 입력하고 Enter 키를 누르고 프로젝트가 준비 될 때까지 기다립니다. 그런 다음 입력 하여 개발 서버를 시작하기 위해 cd <your-project-name>실행할 수있는 해당 디렉토리 내에 있는지 확인 yarn dev합니다.

이제 새 Next.js 10 프로젝트를 실행해야합니다.

Tailwind 및 해당 종속성 설치

Tailwind CSS는 JavaScript로 CSS를 변환하는 도구 인 PostCSS에 구축 된 플러그인 입니다. v2.0은 최신 PostCSS 릴리스 용으로 업데이트되었으며 Tailwind 자체와 함께 설치 postcss및 autoprefixer피어 종속성 이 필요 합니다.

Tailwind를 추가하고 npm 또는 yarn을 사용하여 PostCSS와 자동 접두사를 설치합니다.

yarn add tailwindcss postcss autoprefixer

구성 파일 생성

애플리케이션의 루트에 tailwind.config.js및 postcss.config.js파일 을 추가해야 합니다. 이를 설정하려면 다음 명령을 사용하십시오.

npx tailwindcss init -p

그러면 tailwind.config.js프로젝트의 루트에 파일 이 생성됩니다.

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

구성 설명서 에서 Tailwind 구성에 대해 자세히 알아보십시오.

또한 다음 postcss.config.js을 포함 tailwindcss하고 autoprefixer구성된 파일을 생성 합니다.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

CSS 가져 오기

styles폴더를 만들고 CSS 파일에서 Tailwind CSS를 가져 오 겠습니다.

touch styles / tailwind.css

내부 tailwind.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Next.js 앱에 전역 CSS를 추가하려면 기본 App구성 요소 를 재정의해야합니다. Next.js 10을 사용하면 _app.js페이지 폴더에 이미 있어야 합니다.

이제 우리가 만든 스타일 시트를 가져옵니다.

import '../styles/globals.css'
import '../styles/tailwind.css';
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

이제 홈 페이지에 Tailwind CSS 마법을 추가 할 준비가되었습니다.

/pages/index.js(또는 /pages/index.tsxTypeScript를 사용하는 경우)로 이동하여 Tailwind CSS 클래스로 일부 요소를 추가합니다.

예를 들면 :

export default function Home() {
 return (
  <div className="flex rounded-lg p-24 justify-center">
   <img
    className="h-24 w-24 rounded-full mx-0 mr-5"
    src="https://bit.ly/37LLS6l"
   />
   <div className="text-center md:text-left">
    <h2 className="text-lg font-bold">Jake Prins</h2>
    <div className="text-purple-600">JavaScript developer</div>
    <div className="text-gray-600">Twitter: @jakeprins_nl</div>
    <div className="text-gray-600">jakeprins.com</div>
   </div>
  </div>
 );
}

브라우저의 http : // localhost : 3000 에서 yarn dev앱을 보려면 실행 하십시오.

PurgeCSS 구성

Tailwind CSS의 한 가지 문제는 큰 파일 크기이지만 PurgeCSS로 해결할 수 있습니다. PurgeCSS는 HTML을 스캔하고 사용되지 않는 클래스를 제거하여 파일 크기를 줄입니다.

개발중인 경우 빌드 프로세스를 실행하지 않고 Tailwind CSS 클래스를 사용할 수 있기를 원하기 때문에 프로덕션에서만이 기능을 원합니다.

이제 Tailwind CSS v2에는 PurgeCSS가 이미 포함되어 있습니다. tailwind.config.jsTailwind가 프로덕션 빌드에서 사용하지 않는 스타일을 트리 쉐이킹 할 수 있도록 파일을 업데이트 하기 만하면됩니다.

다음과 같이 파일을 업데이트하십시오.

module.exports = {
    purge: [
      './pages/**/*.{js,jsx,ts,tsx}',
      './components/**/*.{js,jsx,ts,tsx}',
    ],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

지금 .js, .jsx, .ts or .tsx은 pages/또는 components/폴더에 있는 파일 내의 모든 코드를 확인 합니다. 다른 폴더에 HTML을 추가하려는 경우 containers/해당 폴더를이 구성 파일에 추가해야합니다.

최상의 성능을 위해 사용하지 않는 트리 흔들기 스타일에 대해 자세히 알아 보려면 생산 최적화에 대한 Tailwind의 가이드를 읽을 수 있습니다.

결론

이제 번들 크기에 대해 걱정할 필요없이 최신 버전의 Next.js 및 Tailwind CSS로 작업 할 준비가되었습니다.
그게 다야! 읽어 주셔서 감사합니다. 도움이 되었기를 바랍니다.

noreferrer & noopener

원문 출처 : better-programming

'IT정보' Related Articles
Comment