Tailwind CSS를 사용하여 프런트엔드 멘토 프로젝트를 설정하는 방법

최근 업무량의 변화로 인해 평소처럼 개발자로서의 즐거움을 누릴 수 없게 되었습니다. 즉, 구축할 프런트엔드 기능이 없습니다. 이를 보완하기 위해 저는 개발자가 실제 프로젝트로 전환할 수 있는 아름다운 UI 모형을 제공하는 프런트엔드 멘토 플랫폼에서 프로젝트 개발을 다시 시작했습니다. 저는 약 1년 전에 플랫폼을 사용하기 시작했고 프로젝트의 품질뿐만 아니라 개발자에게 접근성 모범 사례를 교육하는 데 중점을 둔 커뮤니티 구축에 중점을 둔 점에도 깊은 인상을 받았습니다. 이것은 HTML과 CSS만 필요한 매우 간단한 프로젝트부터 시작하여 다양한 난이도의 실제 프로젝트에서 프런트 엔드 기술을 연마하려는 모든 개발자에게 적극 권장하는 훌륭한 리소스입니다. 스킬레벨!

이 플랫폼의 가장 큰 장점 중 하나는 디자인과 일부 기본 시작 코드만 제공하므로 원하는 기술 조합을 자유롭게 선택하여 프로젝트를 완료할 수 있다는 것입니다. 개인적으로 저는 프레임워크 ¹의 사용을 줄이고 시맨틱 HTML 작성과 상호작용을 위한 순수 JS 추가에 집중하려고 노력하고 있습니다. 이것이 제가 앞으로 할 솔루션의 대부분입니다.

그래도 저는 여전히 사이드 프로젝트 스타일링 솔루션으로 Tailwind를 정말 좋아합니다. 저는 이 프로그램을 약 3년 동안 전문적으로 사용해 왔으며 기본 기능을 확장할 때 유용한 기본 유틸리티 클래스와 즐거운 개발 경험 사이에서 좋은 균형을 이루고 있음을 발견했습니다(자세한 내용은 아래에서 설명하겠습니다). 초보자가 바로 Tailwind를 사용하여 구축을 시작해야 한다고 제안하는 것이 아닙니다. CSS를 먼저 배우십시오. 그러나 CSS 작동 방식을 많이 아는 사람으로서 Tailwind는 유틸리티 클래스가 내부적으로 수행하는 작업을 이해하고 있기 때문에 생산성 도구입니다.

그래서 프론트엔드 멘토와 함께 몇 가지 챌린지를 완료한 후 제공된 프로젝트 시작 코드에 Tailwind를 여러 번 추가해야 했습니다. 플랫폼을 처음 접하지만 프로젝트에서 Tailwind를 사용하려는 다른 개발자에게 일반적인 시작 프로젝트에서 Tailwind를 설치하고 구성하기 위한 워크플로를 문서화하는 것이 도움이 될 수 있다고 생각했습니다. 종속성 관리의 많은 기능과 마찬가지로 이를 수행하는 방법도 아마도 백만 가지에 달할 것입니다. 이는 제가 선호하는 방법이므로 실제 결과는 다를 수 있습니다.

Tailwind 설치

패키지 설치

먼저 Front End Tutor에서 다운로드한 시작 코드의 루트 디렉터리로 이동한 후 다음 명령을 실행하여 Tailwind 및 해당 종속 항목을 설치해야 합니다.

npm install -D tailwindcss postcss 자동 접두사

종속성에 대한 몇 가지 참고사항:

• Tailwind CSS는 PostCSS를 사용하여 CSS를 처리합니다. PostCSS는 JavaScript 플러그인을 사용해 CSS를 변환하는 도구이며, Tailwind CSS 자체가 PostCSS 플러그인²입니다.
• Autoprefixer는 Can I Use의 값을 사용하여 CSS 규칙에 공급업체 접두사를 추가하는 PostCSS 플러그인입니다. CSS가 다양한 브라우저에서 작동하도록 보장합니다.

기술적으로 프로젝트에 Tailwind를 설치하는 데 꼭 필요한 것은 아니지만 일반적으로 사용하면 더 원활하게 실행됩니다.

TailwindCSS 초기화

다음으로, 다음 명령을 사용하여 tailwind.config.js 및 postcss.config.js 파일을 생성하겠습니다.

npx tailwindcss init -p

소스 경로 구성

다음으로 tailwind.config.js로 이동하여 index.html을 콘텐츠 배열에 추가하세요. 이렇게 하면 불필요한 스타일이 지워집니다. Tailwind의 콘텐츠 구성 문서에서 이것이 실제로 어떻게 작동하는지 자세히 알아볼 수 있습니다.

Tailwind 유틸리티 클래스를 사용하여 스타일을 지정할 프로젝트용 HTML 파일을 여러 개 만드는 경우 해당 경로도 이 배열에 추가해야 합니다.

<code>module.exports = {
  content: ["index.html"],
  theme: {},
  plugins: [],
};</code>

CSS에 Tailwind 포함

프로젝트 루트에 CSS 파일을 만들고(보통 styles.css라고 이름 지정) 다음 콘텐츠를 추가합니다.

<code>@tailwind base;
@tailwind components;
@tailwind utilities;</code>

빌드 스크립트 추가 및 실행

package.json 파일에 CSS를 빌드하는 스크립트를 추가하세요. 그러면 빌드된 스타일이 포함된 output.css 파일이 생성됩니다. --watch 플래그를 사용하면 CSS 변경 사항을 실시간으로 볼 수 있습니다. 즉, 스타일을 업데이트할 때마다 스크립트를 다시 시작할 필요가 없습니다.

이 명령의 이름은 원하는 대로 지정할 수 있습니다. 여기서는 관례를 따를 뿐입니다.

<code>"scripts": {
  "build:css": "tailwindcss build styles.css -o output.css --watch"
}</code>

이제 다음 스크립트를 실행하여 CSS를 컴파일할 수 있습니다.

npm run build:css

링크 스타일시트

마지막으로 index.html 파일(및 스타일을 적용할 다른 HTML 파일)의 헤드에 링크 태그를 포함해야 합니다.

<code><link href="output.css" rel="stylesheet"></link></code>

이제 이 파일에서 Tailwind가 작동하는지 테스트할 수 있습니다. 저는 보통 >

같은 것을 추가합니다.

프로젝트 글꼴 설치

Front End Mentor에서 프로젝트의 시작 코드를 다운로드하면 빌드할 디자인의 글꼴에 대한 글꼴 파일이 포함되어 있습니다. 여기에는 일반적으로 가변 글꼴 파일과 정적 글꼴 파일의 조합이 포함됩니다. 우리의 목적을 위해 우리는 ./assets/fonts/static에 제공된 파일을 사용할 것입니다.

이 파일들과 프로젝트 루트 디렉터리에 제공되는 style-guide.md 파일을 살펴보고 어떤 글꼴이 사용되는지, 어떤 글꼴 가중치가 필요한지 확인하는 것이 좋습니다.

@font-face 규칙 추가

결정되면 프로젝트 루트에 또 다른 새 CSS 파일을 생성해야 합니다(저는 일반적으로 이름을 Fonts.css로 지정합니다). 그런 다음 시작 코드에 제공된 각 글꼴 파일에 대해 @font-face 규칙을 정의해야 합니다.

<code>@font-face {
  font-family: "Inter";
  font-weight: 400;
  src: url("assets/fonts/static/Inter-Regular.ttf") format("ttf");
}

@font-face {
  font-family: "Inter";
  font-weight: 600;
  src: url("assets/fonts/static/Inter-SemiBold.ttf") format("ttf");
}

@font-face {
  font-family: "Inter";
  font-weight: 700;
  src: url("assets/fonts/static/Inter-Bold.ttf") format("ttf");
}</code>

위의 예는 Inter 글꼴의 세 가지 다른 가중치를 사용하는 소셜 링크 프로필 챌린지에 대한 내 솔루션에서 나온 것입니다.

글꼴을 정의한 후에는 이전에 output.css를 사용했던 것처럼 HTML 문서에 스타일 시트를 연결해야 합니다.

<code>module.exports = {
  content: ["index.html"],
  theme: {},
  plugins: [],
};</code>

확장된 Tailwind 구성

이제 tailwind.config.js에서 테마를 확장하여 필요한 곳에 프로젝트 글꼴을 적용할 유틸리티 클래스를 추가해야 합니다.

<code>@tailwind base;
@tailwind components;
@tailwind utilities;</code>

프로젝트에 사용자 정의 글꼴이 여러 개 있는 경우 FontFamily 개체에서 속성을 원하는 만큼 정의할 수 있습니다. 이러한 속성의 이름은 원하는 대로 지정할 수 있지만 일반적으로 comic-sans와 같이 대부분의 Tailwind 유틸리티가 기본적으로 작성되는 방식과 일치하도록 글꼴 이름을 하이픈으로 변환합니다.

이제 HTML에 Font-inter 클래스를 추가하고 마크업에 적용된 새 글꼴을 확인할 수 있습니다! 또한 우리가 설정한 다양한 글꼴 가중치(예: 글꼴 세미볼드)를 사용하여 글꼴을 600 가중치로 적용할 수도 있습니다.

<code>"scripts": {
  "build:css": "tailwindcss build styles.css -o output.css --watch"
}</code>

위 내용은 Tailwind CSS를 사용하여 프런트엔드 멘토 프로젝트를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!