어서 오십시오

이봐, 가족!

다른 기사로 돌아온 ya boi Coops입니다. 최근에 저는 Next.js에서 놀고 있었고 그것을 정말 좋아해서 그 사랑을 공유하고 싶었습니다.

나는 그것으로 스타일을 만들지 않을 것입니다. 그것은 미래의 기사에서 나옵니다.

오늘은 설정에 관한 것입니다.

새 다음 앱 만들기

뻔한 것처럼 보일 수 있지만 시작하기에 가장 좋은 곳은 시작입니다.

그래서 반짝이는 새 프로젝트를 만들어 보겠습니다. 저는 요즘 Yarn을 사용합니다. 한 라이브러리가 지원되지 않았기 때문에 NPM을 사용하는 데 한 번만 필요하고 더 빠르다는 것을 알았습니다.

    $ yarn create next-app <project-title>

런치패드 설정이 완료되면 안전 확인을 수행하여 제대로 생성되었는지 확인하고 싶습니다. 패키지인 경우 -version을 확인하여 설치되었는지 확인합니다.

그러나 새 프로젝트의 경우 서버를 시작하고 싶습니다.

    $ yarn dev

저는 이것을 안전 점검이라고 부릅니다. 왜냐하면 새 앱을 만들고 빌드를 시작한 다음 제대로 설치되지 않은 경우 심장 박동수가 증가하고 때로는 팔이 닿을 수 있는 기술에 대한 안전하지 않은 환경이 발생할 수 있기 때문입니다(하하!).


그러면 다음과 같은 폴더 구조가 있어야 합니다.

root-folder
 > .next
 > node_modules
 > pages
    ├── api
    │   └── hello.js
    ├── _app.js
    └── index.js
 > public
    ├── favicon.ico
    └── vercel.svg
 > styles
    ├── globals.css
    └── Home.modules.css
 ─ .gitignore
 ─ package.json
 ─ README.md
 ─ yarn.lock

파일과 폴더가 무엇을 하는지에 대해서는 다루지 않을 것입니다. 그것은 제가 절대적으로 💜 💜 💜 Next.JS에 대한 심층 분석을 계획하고 있기 때문에 확실히 또 다른 수업을 위한 것입니다.

설치

먼저 파일 시작 부분에 있는 모든 CSS 가져오기와 스타일 참조className={styles.<style>}가 있는 코드의 모든 항목을 제거하겠습니다.

이 페이지가 재구축됨에 따라 나는 모든 코드를 삭제하고 어쨌든 새로 시작할 가능성이 더 높지만 각각은 고유합니다.

그런 다음 패키지를 설치하여 시작하십시오.

    $ yarn add --save-dev tailwindcss postcss-preset-env

나중에 버전 검사를 통해 문제가 발생하지 않도록 후속 조치를 취하는 것을 잊지 마십시오.

    $ yarn -v tailwind

대부분의 사람들이 이렇게 하지 않는다는 것을 압니다. 하지만 그것은 아마도 30분 동안 코드가 패키지가 설치되지 않았다는 것을 알아내기 위해 작동하지 않는 이유를 궁금해 하지 않았기 때문일 것입니다.

문서가 말하는 것처럼 '이제 재미가 시작됩니다!'

NPX 명령으로 순풍 초기화

    npx tailwindcss init

(이 단계에서 NPX를 사용하는 원사에 대해 확신할 수 없지만 조사 중이며 답변을 알고 있다면 아래에 의견을 남겨주세요)

실행되면 디렉토리 루트에 postcss.config.js 파일을 생성해야 합니다.

우리는 지금 이와 같은 것을 남겨야합니다.

root-folder
 > .next
 > node_modules
 > pages
    ├── api
    │   └── hello.js
    ├── _app.js
    └── index.js
 > public
    ├── favicon.ico
    └── vercel.svg
 > styles
    ├── globals.css
    └── Home.modules.css
 ─ .gitignore
 ─ package.json
 ─ postcss.config.js
 ─ README.md
 ─ yarn.lock

그리고 postcss.config.js에서 추가

module.exports = {
    plugins: ["tailwindcss", "postcss-preset-env"],
};

그런 다음 더 이상 필요하지 않은 styles/globals.css 파일을 지우고 Tailwind 가져오기로 바꿉니다.

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

그리고 Home.module.css 파일을 완전히 삭제합니다.


그리고 Next.JS 앱에서 Tailwind 설정이 완료되었습니다!
yarn dev 서버를 실행하면 앱이 기본적으로 스타일이 없는 앱으로 설정되어 있음을 알 수 있습니다.

하지만 더 많은 것이 있습니다... 하지만 다른 기사를 위해 실제 Tailwind 마법을 저장합니다.

이것은 그의 부드러운 남부 억양의 지도로 지어졌습니다.

뿐만 아니라 Tailwind docs의 안내