이 게시물은 Tailwind CSS에서 템플릿 경로를 구성하는 절차를 보여줍니다.
Tailwind CSS에서 템플릿 경로를 구성하는 방법은 무엇입니까?
“ tailwind.config.js ” 구성 파일은 사용자가 Tailwind CSS를 포함하려는 템플릿 경로를 구성하는 데 사용됩니다. 기본적으로 존재하지 않지만 'npm' 패키지 관리자를 사용하여 프로젝트에서 만들 수 있습니다.
이 섹션에서는 'tailwind.config.js' 파일에서 템플릿 경로를 구성하기 위한 몇 가지 필수 단계를 수행합니다.
메모 : “Tailwind CSS”를 구현하려면 먼저 “ Node.js ' 제공된 링크를 통해 시스템의 응용 프로그램 ' https://nodejs.org/en ” 명령을 실행합니다.
1단계: 'TailwindCSS' 설치
먼저 'Project1'이라는 새 프로젝트를 만들고 코드 편집기에서 엽니다. 이제 새 터미널을 열고 다음 명령을 사용하여 'Tailwind CSS'를 설치합니다.
npm 설치 -D tailwindcss
위 명령어에서 ' npm '는 다음과 같이 'TailwindCSS'를 설치하는 노드 패키지 관리자입니다.
여기서 출력은 'Tailwind CSS' 및 해당 패키지가 성공적으로 다운로드되었음을 보여줍니다.
2단계: Tailwind 구성 파일 만들기
다음으로 Tailwind CSS 구성 파일 ' tailwind.config.js ” 이 명령을 사용하여 HTML 템플릿 경로, 사용자 정의 클래스 및 기타 여러 항목을 지정하는 것과 같은 기능을 확장합니다.
출력은 지정된 구성 파일이 생성되었음을 보여줍니다. 이제 '를 살펴보십시오. tailwind.config.js ” 파일:
3단계: 기본 CSS 파일에 Tailwind 지시문 추가
이제 생성된 Tailwind 프로젝트에 특수 기능을 추가하기 위해 기본 “ 스타일.css ” 파일:
@tailwind 구성 요소;
@tailwind 유틸리티;
위의 코드 블록에서:
- 베이스 : 웹 페이지 스타일을 기본적으로 배경색, 텍스트 색상 또는 글꼴 모음과 같이 수정하는 'Tailwind CSS'의 첫 번째 레이어입니다.
- 구성 요소 : 이 두 번째 레이어는 브라우저 크기에 따라 너비를 추가하는 '컨테이너' 클래스 내에서 사용할 수 있습니다. 해당 섹션에서 사용자는 자신이 만든 외부 구성 요소를 추가할 수 있습니다.
- 유용 : 쉐도우, 컬러, 덧셈, 플렉스 등 거의 모든 스타일링 클래스를 합산한 세 번째 레이어입니다.
이러한 지시문은 다음 창에서 볼 수 있습니다.
4단계: CSS 구축
이제 다음 명령을 실행하여 Tailwind CLI 도구를 사용하여 CSS를 빌드합니다. 모든 템플릿 파일을 스캔하고 ' 거리/output.css ” 파일:
위의 명령이 성공적으로 실행되는 것을 볼 수 있습니다. 이제 'project1'의 파일 구조는 다음과 같습니다.
5단계: HTML 템플릿 생성 및 해당 경로 구성
사용자가 'Tailwind CSS'를 삽입하려는 HTML 템플릿을 만든 다음 ' tailwind.config.js '. 먼저 다음 HTML 템플릿을 살펴보겠습니다. index.html ”:
< 링크 헥사 = '/dist/output.css' 친척 = '스타일시트' >
< / 머리 >
< 몸 >
< h2 수업 = '텍스트 중앙 글꼴-굵은 텍스트-흰색 bg-orange-500' >Linuxhint에 오신 것을 환영합니다!< / h2 >< br >
< h3 수업 = '텍스트 중앙 글꼴-굵은 텍스트-파란색-600 bg-분홍색-400' >첫 번째 자습서: Tailwind CSS 프레임워크.< / h3 >< br >
< 피 수업 = '텍스트 중앙 텍스트-그린-500' >Tailwind CSS는 미리 정의된 CSS 클래스를 다음과 같이 설정하는 데 도움이 되는 잘 알려진 CSS 프레임워크입니다. 스타일 HTML 요소.< / 피 >
< / 몸 >
위의 코드 라인에서:
- 'head' 섹션은 ' <링크> ” 생성/컴파일된 CSS 파일을 연결하는 태그 “ /dist/output.css '를 기존 HTML 파일 ' index.html '.
- 'body' 섹션은 먼저 ' ” Tailwind 클래스를 사용하여 첫 번째 부제목을 정의하는 태그 “ 텍스트 정렬 ”를 사용하여 “중앙”에서 정렬을 조정하고, “ 글꼴 두께 ' 텍스트를 '굵게', ' 텍스트 색상 ”는 지정된 색상을 추가하고 “ 배경색 ”를 선택하여 각각 주어진 배경색을 적용합니다.
- 다음으로 “ ' 그리고 ' ” 태그는 또한 위에서 설명한 Tailwind 클래스를 사용하여 콘텐츠 스타일을 지정합니다.
HTML 템플릿 경로 구성
다음으로 ' tailwind.config.js ” HTML 템플릿 파일의 “콘텐츠” 섹션, 즉 “index.html”에 링크 또는 경로를 추가합니다.
누르다 ' Ctrl+S ”를 클릭하여 새로운 변경 사항을 저장합니다.
6단계: HTML 코드 실행
마지막으로 라이브 서버에서 HTML 'index.html' 코드를 실행하고 출력을 확인합니다.
산출
표시된 대로 출력에는 Tailwind CSS의 도움으로 스타일이 지정된 HTML 콘텐츠가 표시됩니다.
결론
Tailwind CSS는 ' tailwind.config.js ” 구성 파일을 사용하여 생성된 HTML 템플릿 경로를 구성합니다. '를 지정합니다. 콘텐츠 ” 섹션에는 모든 HTML 템플릿의 정확한 경로, Tailwind 클래스 이름이 포함된 소스 파일 및 JavaScript 구성 요소가 포함되어 있습니다. 지정된 HTML 파일을 스캔한 다음 내용에 Tailwind CSS를 구현합니다. 이 게시물에서는 Tailwind CSS에서 템플릿 경로를 구성하는 전체 절차를 설명했습니다.