Tailwind CSS로 시작하기

Tailwind CSS란 무엇인가요?

유틸리티 클래스로 구성된 CSS 프레임워크

Bootstrap, Materialize 등보다 훨씬 낮은 수준

Tailwind CSS 사용

npm(노드 패키지 관리자)을 사용하여 Tailwind CSS 설치

컴퓨터에 node.js가 설치되어 있어야 합니다

.

노드가 이미 설치되어 있는지 확인하려면 터미널을 열고 아래 명령을 작성하십시오.

node -v

v14.1.0과 같은 종류의 번호를 얻는다면 이동하는 것이 좋습니다. 그렇지 않으면 여기에서 노드를 다운로드할 수 있습니다: Install Node.JS

Tailwind 작동 방식



tailwind를 사용할 때 모든 tailwind 핵심 스타일 또는 기능을 가져오는 src 파일을 만들고 자체 CSS 스타일을 작성한 다음 Tailwind를 사용하여 이를 처리하고 Vanilla CSS 파일로 출력하고 index.html에 연결할 수 있습니다.

이제 Tailwind CSS부터 시작하겠습니다.

1. npm을 통해 Tailwind를 설치합니다.
터미널을 열고 아래 명령을 실행하십시오.

npm install tailwindcss

2. CSS에 Tailwind 추가
아직 없는 경우 CSS 파일을 만들고 다음을 사용합니다.
Tailwind의 기본, 구성 요소 및 유틸리티 스타일을 주입하는 지시문

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

이것이 초기 설정의 전부입니다. 이제 index.html에서 tailwindcss 클래스를 사용하여 스타일을 지정할 수 있습니다. 그 전에는 터미널에서 이 명령을 실행해야 했습니다.

tailwindcss build src/style.css -o public/style.css

또는 이를 위한 스크립트와 package.json의 프로덕션을 위한 스크립트를 추가할 수 있습니다.



프로세스에 문제가 있는 경우 공식 문서Tailwind Docs를 확인할 수 있습니다.
또는 아래에 댓글을 달아주세요. 최선을 다해 해결해 드리겠습니다.