첫 번째 Tailwind CSS 프로젝트 시작

Tailwind CSS는 스타일을 쉽게 지정할 수 있도록 수백 개의 클래스를 제공하는 저수준 CSS 프레임워크입니다. 사용자 정의 CSS를 작성하지 않고 전체 웹 사이트를 작성했습니다. Tailwind는 그렇게 할 수 있습니다. 최근에는 많은 대형 프로젝트 및 기업에서 사용되고 있습니다.

디렉토리 만들기

mkdir tailwind_dev && cd tailwind_dev

터미널/명령 프롬프트에 위의 내용을 붙여넣습니다.

이제 tailwind를 설치하기 위해서는 node와 javascript를 위한 패키지 매니저인 npm을 사용해야 합니다. 따라서 tailwind를 설치하려면 시스템에 노드를 설치해야 하며, 그러면 npm이 함께 제공됩니다.

You can download Node from https://nodejs.org/en/download/

npm 초기화

프로젝트 내에서 npm을 사용하려면 npm을 사용하도록 프로젝트를 초기화해야 합니다. 그렇게하려면 명령 줄에 아래를 붙여 넣으십시오.

npm init -y

그러면 디렉토리에 다음 파일이 생성됩니다.

package.json

Tailwind 설치

npm install tailwindcss --save

node_modules라는 폴더가 생성됩니다.

순풍 사용

폴더에 두 개의 디렉토리가 있습니다.

src

공공

src 폴더에는 컴파일되지 않은 CSS가 있습니다.
공용 폴더에는 모든 준비와 모든 html, js 등의 파일이 있습니다.

따라서 다음 명령을 사용하여이 두 개를 만드십시오.

mkdir public && mkdir src

cd src && touch styles.css && cd ..

이것은 두 개의 디렉토리를 생성하고 src 디렉토리 안에 style.css 파일을 생성합니다.

cd public && touch index.html && cd ..

이제 즐겨 사용하는 코드 편집기에서 폴더를 엽니다. 내가 가장 좋아하는 것은 VS Code이며 설치되어 있는 경우 다음 명령을 사용하여 디렉토리를 열 수 있습니다.

code .

CSS 편집 시작

이제 src 폴더에 있는 style.css 파일로 이동하여 다음을 추가합니다.

@tailwind base;

@tailwind components;

@tailwind utilities;

이것들은 시작하기 위해 가져와야 하는 몇 가지 기본적인 순풍 CSS입니다.

이제 package.json 파일에서 다음 줄을 제거합니다.

"test": "echo \"Error: no test specified\" && exit 1"

그리고 그 자리에 다음을 추가합니다.

"build-css": "tailwindcss build src/styles.css -o public/styles.css"

이제 터미널에서 다음을 실행하십시오.

npm run build-css

이제 공용 디렉토리에서 styles.css 파일을 볼 수 있습니다.

tailwind를 사용하도록 HTML 편집

이제 index.html 파일에서 head 태그 안에 다음을 추가합니다.

<link rel="stylesheet" href="styles.css">

짜잔, 순풍을 사용할 준비가 되었습니다. 확인하려면 body 태그에 다음을 추가하세요.

<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>

세 텍스트의 크기가 모두 같으면 시작할 준비가 된 것입니다.
Net Ninja의 아래 비디오와 재생 목록의 다음 비디오를 살펴보는 것이 좋습니다. 나는 그의 비디오에서 Tailwind CSS를 배웠고 개인적으로 그 방법을 좋아합니다. 그는 그것을 가르칩니다.



더 나은 이해를 위해 Tailwind documentation도 살펴봐야 합니다.