TailwindCSS

$ npm i -D tailwindcss postcss autoprefixer$ npx tailwindcss init -ppostcss.config.js, tailwind.config.js 파일 생성됨postcss.config.js 파일은 건드리지 않습니다.tailwi

Tailwind 란?Tailwind 의 장점Tailwind 익스텐션은?유틸리티 : 다양한 클래스네임 포함엄청 큰 CSS 파일 이라고 보면됩니다. (Super big, Super Heavy)생산성: CSS 코드 따로 작성하지 않습니다.독창성: CSS 프레임워크이지만 여타

개발자의 css 작성을 도와주는 className 입니다.해당 글에서는 TailwindCSS 를 학습하거나 사용하다가 유용한 Helper Class 사용시 기록용으로 작성하겠습니다.

조건이 발생했을 때 실행되는 속성들'~일 때 실행하는 것들'

Modifier 는 아니지만 Modifier 와 함께 멋진 효과를 낼 수 있습니다.React, State 등의 도움이 필요없습니다.<button> className="focus:ring-2 ring-offset-2" />기본 CSS의 transition 적용시 c

배열의 형태로 있는 요소들의 CSS 적용에 도움을 주는 Modifier 입니다.|Modifier|CSS|\|:---:\|:---:\||only-of-type:|&:only-of-type||first-of-type:|&:first-of-type||last-of-type:

컨터이너, 래퍼 박스에 group 클래스네임을 줍니다.해당 박스에 Hover 되었을때 변화를 주고 싶은 태그 클래스네임에 group-hover:bg-red-300 과 같이 줍니다.변화를 주고싶은 클래스네임에 transition-colors 를 적어주면 transitio

HTML 태그, TailwindCSS 보단 기본 HTML 내용일반적으로 <summary> 와 박스 태그 <div>, <span> 들 중 하나; 즉, 두 개의 자식 태그를 가지고 활용합니다.기본형은 노션의 토글 버튼 같은 UI 를 제공합니다.컨텐츠가 드래