TailwindCSS설치방법

# TailwindCSS 설치방법 #npm #CDN

출처: https://www.youtube.com/watch?v=zun40BxCzYU&list=PLTb3qGCzYjS3DHl3q0Hlq8kRT5fd9aK5_&index=2

(위의 영상은 https://tailwindcss.com/docs/installation 여기에 있는 내용을 자세히 설명한 것이다. 여기서 주의할 점은 아무리 영상을 봐도 결국은 그것은 흔들리는 지식이다. 내가 굳건하게 설려면 공식문서를 해석하는 힘을 길러야 한다. 이 힘을 기르는 좋은 방법은 저런 친절한 영상과 문서를 비교해가면서 보고 어떤 내용이 공식문서에는 생략되어 있는가, 그리고 공식문서에서는 어떤 방식으로 설명하는가, 둘의 차이점을 비교하면서 공부하는 것이다)

(복습. npm(node.js로 만든 패키지의 메니저. Node Package Manager), npx(Node pacake Execute))


(기본적으로 tailwindCSS를 사용하려면 node.js깔려 있어야 함)
새 폴더하나 만들고 VScode이용해서 그 폴더로 들어간 후에 터미널(Ctrl+` )에 들어가서 npm install -D tailwindcss 입력. 

다음으로 확작팩에 다음들을 설치. 
Live Server
tailwindcss intelligence
inline fold 

VScode 터미널로 돌아와서 npx tailwindcss init 입력 

(npx란 nope package Execute로 말그대로 tailwindcss라는 패키지를 실행시켜주는 명령어 이다.)

html파일에서 html기본 틀 형식 만들어주는 것이 단순히 html 입력하고 엔터 쳐도 되지만 ! 입력한후 Tab키 눌러도 생성해줌. 

-i 는 input을 의미하고 -o는 output을 의미함. 즉, ./src/input.css를 넣어서 ./build/css/style.css를 반환한다는 의미임. ./src/input.css는 붕어빵 틀, ./build/css/style.css는 만들어진 붕어빵

 

이렇게 --watch 시켜놓는건 보고 있으라는 건데 이 상태에서 장난으로 같은 터미널창에 문자입력하면 안됨. 오작동함. watch라는 기능은 계속해서 보고있는 다는 것으로 내가 터미널이나 소스코드에 무언가를 입력하면 그대로 영향을 받음. 그래서 장난하지 말라는 거

 

위와 같이 설치하는 방법도 있지만 간단하게 CDN을 이용하는 방법도 있음. 하지만 네트워크를 이용하는 것이다 보니 속도가 느려지는 단점이 있음.

(CDN은 Content Delivery Network의 약자로 웹컨텐츠 즉, 웹페이지, 이미지, 동영상등의 컨텐츠를 서버로 부터 사용자에게 전송하는 것을 말한다. Tailwind에서는 CDN방식으로 내가 위에서 한것처럼 npm으로 tailwind를 설치하지 않아도 tailwind서버에서 css라이브러리를 받아와서 쓰는 것을 말하는 것 같음. 대신에 네트워크를 이용하므로 속도는 느려짐)

출처: https://www.youtube.com/watch?v=_kcoeK0ITkQ