Taliwind css : class명으로만 CSS 조지기

< 공식 문서>

 

tailwindcss.com

---

< 설명  >

 

앞서 animate.css 를 통해 남이 만들어놓은 애니메이션 css 클래스를 가져다쓰는것을 보았었다.

이보다 훨씬 더 나아가, Taliwind css 는 모든것을 클래스명으로 정의할수있게 해주는 CSS 프레임워크이다.

<div class="text-blue-700">Hello World!</div>

거의 2만개가 넘는 클래스를 가지고있다고한다.

CSS 의 모든 속성을 클래스명으로 대체할수있다.

 

Taliwind css 의 창시자는

"Separation of concerns (걱정의 분리)" 라는 프로그래밍의 best practice 는

HTML & CSS 의 세계에서는 통하지않는다고한다. 

결국 CSS 코드를 작성하고있으면서도, 우리는 계속해서 HTML 의 구성을 걱정하고있다는것이다.

따라서 별도의 CSS 코드를 작성하는대신에, 클래스명에 바로 원하는 속성을 때려박을수있게 해준것이다.

 

당연히 기존에 CSS 를 코딩으로 해봤던 사람에게 유리하다.

속성들명을 대부분 외우고있고, 이에 대응하는 클래스명을

Taliwind 공식 홈페이지

Taliwind 공식 홈페이지에서 검색해가며 클래스명을 작성해나가면된다.

개발할떄는 이 홈페이지를 항상 띄워놓는것이 좋을것이다.

---

< 설치법 >

 

기본적으로 Vite 환경에 최적화되어있다.

아래의 영상을 시청하자.

 

www.youtube.com/watch?v=uBBvuA3b6kU

 

설치과정을 잘 이행하면 알겠지만, 따로 각 .vue 파일에 import 할 필요가 없다.

---

< 코드 >

<template>
  
  <div 

    class=
    
      " 
        w-20 
        h-20  
        flex 
        justify-center 
        items-center 
        text-blue-700
        bg-yellow-600
        hover:bg-red-700
        transform
        hover:rotate-180
        transition
        duration-1000
        
      "
    
  >Hello World</div>
    
  
</template>