TailwindCSS를 Next.js와 통합

10007 단어 reactnextjsjavascript
이 자습서에서는 TailwindCSS을 Next.js과 통합하는 가장 간단한 방법을 배웁니다.

Next.js가 무엇인가요?



Next.js은 기본적으로 서버 측 렌더링을 제공하는 React 프레임워크입니다. over 59k stars on Github이 포함된 매우 인기 있는 Node.js 프레임워크입니다. several features , Server-Side rendering , Static Exporting 등과 같은 CSS-in-JS 을 제공합니다.

1년 넘게 Next.js와 함께 일했고 전반적인 개발자 경험이 마음에 들었습니다. 새 페이지 생성, 새 플러그인 추가, 라우팅 등이 매우 쉽습니다. 이 모든 것 외에도 starter templates (or examples) 많은 기능이 있습니다.

Zeit을 사용하여 Next.js 애플리케이션을 프로덕션에 배포하는 것도 pretty simple입니다.

TailwindCSS란 무엇입니까?



내 TailwindCSS 중 하나에서 previous posts에 대해 이미 다루었습니다. 즉, TailwindCSS는 일련의 유틸리티 클래스(플렉스, 블록, 인라인 블록 등)를 제공하는 것을 목표로 하는 유틸리티 우선 CSS 프레임워크입니다. 그 외에도 CSS 그리드, 반응형 디자인, 스타일 호버, 포커스 및 활성 의사 클래스를 만드는 유틸리티 클래스도 제공합니다.

시작하기



bootstrapping a Next.js application부터 시작하겠습니다. 이렇게 하려면 다음 명령을 실행해야 합니다.

npx create-next-app


모든 것이 제대로 작동하면 다음과 같은 결과가 표시됩니다.



설치가 완료되면 응용 프로그램을 만들 때 지정한 이름인 새frontend 디렉토리를 얻게 됩니다. frontend 내부로 이동하여 서버를 시작합니다.

cd frontend && yarn dev


이제 http://localhost:3000을 방문하면 다음 페이지가 표시됩니다.



TailwindCSS 설치



내 previous posts 중 하나에서 React와 TailwindCSS를 통합하는 방법에 대해 작성했습니다. TailwindCSS를 Next.js와 통합하는 과정은 비슷할 것입니다.

먼저 TailwindCSS를 설치해야 합니다.

yarn add tailwindcss


npm을 선호하는 경우 위 명령 대신 다음 명령을 실행할 수 있습니다.

npm install tailwindcss


다음으로 @tailwind 지시문을 사용하여 Tailwind의 기본, 구성 요소 및 유틸리티 스타일을 CSS에 삽입해야 합니다. 그렇게 하려면 public/assets/styles/vendors.css에 다음 코드를 추가하여 새 파일을 만들어야 합니다.

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


다음으로 build:style 스크립트를 package.json 파일에 추가해야 합니다.

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "build:style": "tailwind build public/assets/styles/vendors.css -o public/assets/styles/tailwind.css"
},


이제 build:style 명령은 실행할 때마다 새 public/assets/styles/tailwind.css 파일을 생성합니다.



다음으로 생성된 파일을 pages/index.js 파일에 추가해야 합니다.

import React from "react";
import Head from "next/head";
import Nav from "../components/nav";
import "../public/assets/styles/tailwind.css";


이것이 TailwindCSS가 Next.js와 함께 작동하도록 하기 위해 우리가 해야 할 전부입니다. TailwindCSS가 작동하는지 여부를 확인하기 위해 TailwindCSS 클래스를 추가할 수 있습니다. bg-blue-900 py-8 클래스를 pages/index.js 파일에 추가할 수 있습니다.

const Home = () => (
  <div>
    <Head>
      <title>Home</title>
      <link rel="icon" href="/favicon.ico" />
    </Head>
    <Nav />
    <div className="hero bg-blue-100 py-8">
      <h1 className="title">Welcome to Next.js!</h1>
      <p className="description">
        To get started, edit <code>pages/index.js</code> and save to reload.
      </p>


이제 서버를 다시 시작하고 http://localhost:3000 을 방문하면 TailwindCSS가 예상대로 작동하는 것을 볼 수 있습니다.



Tailwind 구성에 대해 자세히 알아보려면 해당 내용을 읽어보십시오here.

결론



이 자습서에서는 Next.js 애플리케이션과 함께 TailwindCSS를 사용하는 방법을 배웠습니다. 앞으로는 ProductHunt 및 React을 사용하여 GraphQL 클론을 빌드합니다.

이 튜토리얼이 향후 프로젝트에 도움이 되기를 바랍니다.
IOS 프록시 전송, 단일 전송
활성 목록 자동 스크롤 상단 만들기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage