tailwindcss, alpine.js 이거 두개는 꼭 써보세요. > 자유게시판

자유게시판

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시간도 안걸려요.

특히 퍼블리셔분들이 배우시면 활용도가 엄청 많을겁니다.

 

이 두가지 익히시면 코딩작업이 아주 수월하고 재밌어 집니다.

추천
5

댓글 4개

.btn { @apply px-4 py-2 rounded-sm bg-blue-600...  } 이런식으로 클래스명만으로 특정 클래스를 만들 수 있구요. 좋은 거 같아요. 최근 js프레임을 공부하면서 tailwind만 계속 쓰게 되는 듯해요. 편하기는 부트스트랩이 편하지만... tw-elements라고 거의 테일윈드를 부트스트랩처럼도 사용이 가능한 것 같아요.
네 저도 그런식으로 나름 컴포넌트를 라이브러리로 만들어 두고 씁니다.
tw-elements 는 저도 몰랐네요.  감사합니다.
전체 190,083 |RSS
자유게시판 내용 검색

회원로그인

진행중 포인트경매

  1. 참여9 회 시작22.08.09 20:51 종료22.08.14 20:51
(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT