모형 ✏

초기 아이디어를 기록한 후 Adobe XD에서 목업을 만들기 시작했습니다.
먼저 Dribbble을 사용하여 무드 보드를 만들고 FontPair에서 일부 글꼴을 살펴 보았습니다. 또한 일부 무료 그래픽을 검색하여 Storyset에서 올바른 그래픽을 찾았습니다.
다음은 최종 모형입니다.

페이지 만들기 💻

먼저 공식 문서의 지침에 따라 Tailwind를 설정했고 모든 것이 순조롭게 진행되었습니다!
그런 다음 지난 게시물에서 언급한 튜토리얼을 따라 내 사용자 지정 테마를 설정합니다.

theme: {
    extend: {
      colors:{
        background: "#FF979E",
        primary: "#162A40",
        secondary: "#FFFFFF"
      },
      fontFamily:{
        header: ["Pacifico","cursive"],
        body: ["Cabin", "sans-serif"]
      }
    },
  }

그렇게 웹페이지를 만들 준비가 되었습니다.

처음에는 다음과 같이 정말 긴 클래스 이름을 사용하는 것이 다소 손에 닿지 않는 것처럼 보였습니다.

class="block rounded-full bg-primary text-secondary px-10 py-2 text-base"

하지만 다음과 같이 @apply 지시문을 사용하여 단일 클래스로 압축할 수 있다는 것을 기억했습니다.

.btn{
    @apply block rounded-full bg-primary text-secondary px-10 py-2 text-base;
}

정돈된!

레이아웃은 CSS 그리드를 사용하여 만들어지는데, 저는 항상 약간 복잡하다고 생각했지만 Tailwind는 grid-cols-1 와 같은 클래스를 사용하여 정말 간단하게 만들었습니다.
반응 중단점, 즉 sm: md: lg: 등 덕분에 전체 페이지를 반응형으로 만드는 것이 매우 쉬웠습니다.
그래서 나의 반응성은 전적으로

class="grid grid-cols-1 md:grid-cols-2"

또한 매우 깔끔합니다!

그런데 한 가지 문제가 있었습니다🤯

Tailwind 스타일시트는 엄청났습니다!
나는 이것이 생산에서 그렇게 크게 만들 수 없다는 것을 알고 다시 검색을 시작했습니다.

문서를 충분히 읽지 않았고 중요한 단계를 놓쳤습니다: optimizing for production .

언급한 대로 PurgeCSS을 신속하게 설정하여 수신 허용 목록을 포함했는지 확인합니다. 이는 동적으로 생성된 클래스가 최종 파일에도 추가되도록 하기 위한 것입니다.
따라서 내 순풍 구성 파일에는 다음 줄이 필요했습니다.

  purge: {
    content: ['./public/**/*.html'],
    options: {
      safelist: ["grid-cols-3","animate-ping"]
    }
  }

마지막 명령 후 모든 것이 작동했고 마침내 하루를 부를 수 있습니다! 🎉


추신 조심하세요, 여기 또 다른 포옹이 있습니다! 👻