tailwind css 설치하는 방법(생각보다 쉽넹?) + 수정

나혼자 보겠다고 작성해놓고 잊고 있던 글을 생각보다 몇몇 분들이 읽어줬다(조때따..)

지금 내가 다시읽어보니 개차반고, 내블로그보고와서 개똥글을 보고 실망했을 생각을 하니 억장이 무너지기도하니까(?) 정확하게 정리 해본다!!!!!

부트스트랩보다 훨씬 다루기 쉽고 css, bootstrap보다 훨씬 좋다. 배우는것도 오지게 쉬움 나는 tailwind 없으면 못살아ㅠ



CDN : 연습용으로 쓰기 아주 좋다 그냥 복붙해서 바로 사용할 수 있다는 장점

https://cdnjs.com/libraries/tailwindcss

tailwindcss - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

 

---

 

구글링해도 이해 못하는 나같은 사람을 위해

(구글링 해도 복붙해서 설치해봐도 경로가 잘못된건지 안되니까 다시 사이트에서 천천히 이해해보기로했다)

 

추천공부방법은 : 그대로 따라해보고 이해후 응용

1. 터미널열고

2. cd 여기까지만 작성(ㄹㅇ경로 입력할필요없이 개 쉬운 방법)

3. tailwind설치하고 싶은 폴더 그대로 터미널에 드래그 -> 엔터 

cd 드래그된 폴더 

4. 아래코드를 한줄씩 넣고 엔터

npm install -D tailwindcss
npx tailwindcss init

5. 그럼 tailwind.config.js (커스터마이징할 수 있음) 파일 만들어짐

6. 경로를 아래처럼 넣기(이렇게 따라서 하다보니까 경로가 어디부분이 잘못되었던건지 알 수 있었다!)

  content: ["./src/**/*.{html,js}"],

7. 폴더를 만드는데 src만들고 input(폴더명 마음대로).css 만들기

요롷게

8. input.css 아래코드넣기

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

9. 다음 터미널에돌아가서 이 아래코드 넣기 그럼 완료,,

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

10. 이렇게 폴더가 생성됩니다,,

 

11. output 까지 연결하믄 끝

 

테스트 해보기!!!

잘 작동하는것을 확인할 수 있다

 

https://tailwindcss.com/docs/installation