[TailwindCSS] 테일윈드 설치와 사용법 및 장단점

 

 

테일윈드
사용법

 

 

 

 

 

설치 방법

1. 테일윈드 홈페이지에 접속해서 메인 화면에 있는 Get started를 눌러준다

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

 

 

2. 화면에 안내된 순서에 따라 진행

 

             

         [1]   Ctrl + ~ 을 눌러  터미널을 켠 후 아래 코드를 입력한다

  

    
    
    
    
  
npm install -D tailwindcss
npx tailwindcss init

 

 

        [2] 생성된 config.js 파일에 아래 코드를 넣어준다

  

    
    
    
    
  
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

      [3] 메인 css 파일에 아래 코드를 넣어준다

  

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

     [4] 터미널에 아래 코드를 넣어 css 파일을 생성한다

  

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

          input  > 기존 폴더명 , output > 만들 폴더명

 

     [5] html 파일에 새로 생성한 css 파일을 연결해준다

 

 

 

---

사용 방법

Hello world!

공식 문서에 따라 만들어준 css 파일을 연결시키고 

class name에 css요소를 적용시키면 된다!

 

 

사용하면서 느낀 장, 단점

장점

1. 작명을 하지 않아도 된다

2. 태그의 스타일을 바로 볼 수 있어서 작업 효율이 향상된다

 

단점

1. 코드가 길어질수록 가독성이 저하된다

2. 팀프로젝트 사용 시 혼란을 야기할 수 있다

tmi) 팀프로젝트에서 초반에 테일윈드를 사용하다 스타일 컴포넌트로로 변경하게 되었습니다

그 이유가 초반에 작업할 때는 위의 장점들이 돋보여서 좋았지만 다른 팀원들과 함께 오류를 해결하고 세부적인 디자인을 수정하는 과정에서 가독성이 너무 안 좋아서 힘들었던 경험이..