tailwindcss, alpine.js 이거 두개는 꼭 써보세요. 정보
tailwindcss, alpine.js 이거 두개는 꼭 써보세요.본문
첫번째 tailwindcss
아시는 분들은 아시겠지만..
tailwindcss 이거 정말 좋습니다. css 작업이 엄청나게 편해져요.
bootstrap 은 컴포넌트 기반의 css 프레임워크인데 반해 tailwindcss 는 유틸리티 기반입니다.
뭔말이냐면 버튼이나 패널, 메뉴 등등 이런걸 미리 만들어놓은 건 하나도 없지만
css의 웬만한 설정들이 미리 다 선언되어 있어서 클래스로 갖다가 쓰기만 하면 됩니다.
심지어 가로폭을 300px 로 하고 싶다 할때
w-[300px] 이런식으로도 선언이 가능합니다.
!important 로 하고 싶다 할때는 !w-40 이렇게 하면 되고요.
여러가지 편리한 기능이 정말 많아요.
tailwindcss 를 watch 모드로 실행해두면 파일에서 사용한 클래스를 실시간으로 감지해서 그때 그때 클래스를 자동으로 만들어 줍니다. 정말 획기적이죠.
두번째는 alpine.js
react, vue 와 같이 실시간 상태 반응형 웹을 아주 간단하게 만들 수 있습니다.
사용방법도 매우 간단해서 배우는데 1시간도 안걸려요.
특히 퍼블리셔분들이 배우시면 활용도가 엄청 많을겁니다.
이 두가지 익히시면 코딩작업이 아주 수월하고 재밌어 집니다.
추천
7
7
댓글 4개
알파인 js 좋아요 속도가 제이쿼리급이라 그렇지..
.btn { @apply px-4 py-2 rounded-sm bg-blue-600... } 이런식으로 클래스명만으로 특정 클래스를 만들 수 있구요. 좋은 거 같아요. 최근 js프레임을 공부하면서 tailwind만 계속 쓰게 되는 듯해요. 편하기는 부트스트랩이 편하지만... tw-elements라고 거의 테일윈드를 부트스트랩처럼도 사용이 가능한 것 같아요.
@xpem 네 저도 그런식으로 나름 컴포넌트를 라이브러리로 만들어 두고 씁니다.
tw-elements 는 저도 몰랐네요. 감사합니다.
tw-elements 는 저도 몰랐네요. 감사합니다.
tw-elements는 저도 몰랐어요. 저장해 놓았습니다!