Tailwind CSS V3.0

bangina·2021년 12월 11일
2

TIL

목록 보기
17/20
post-thumbnail

What's new in Tailwind CSS v3.0?

Tailwind CSS가 V3로 업데이트되었다!
프로젝트에서 잘 써먹을 만한 부분만 추려서 정리해봤다.

1. Just-in-time engine

성능 개선! file size 축소, purging 고려하지 않아도 된다. ㅠㅠ 드디어

2. Arbitrary Properties

inline style 없이 클래스명으로 상수 주입 가능!

  • w-[478px]
  • img 태그에 [clip-path:circle(70%_at_20%_30%)] [shape-outside:circle(70%_at_20%_30%)] lg:[clip-path:polygon(0%_0%_100%.....)]

3. More selectors!

  • (focus, active) disabled, focus-within, focus-visible, group-hover, first letter, selection, before & after

4. Aspect Ratio API

기존에는 플러그인(padding hack기반)으로 사용가능했는데 이제 tailwind 내장 클래스로 사용가능해졌다.

aspect-video, aspect-ratio, aspect-[3/1]

5. Scroll behavior classes for more polished website

scroll-smooth, scroll-mt-32

6. Column Layout Support!

colums-3, columns-xs : viewport에 따라 컬럼개수 변하게됨

7. Direct Form Styling

accent-violet , file:text-white file:border-none

8. open property added

detail, summary 마크업에 open:bg-white 사용가능. and it will only be applied when opened

Reference

profile
프론트엔드 개발자. 기록하기, 요가, 등산

1개의 댓글

comment-user-thumbnail
2021년 12월 31일

어라? 오늘 재택하면서 테일윈드 CSS v3 + React 로 요리조리 했는데
빠르시군요 ㅋㅋㅋ

아 V3 되면서, IE 지원안하죠??
그리고 호옥시.. 지금 간단하게 컴포넌트 작성해보니까 CSS 가 좀 섞이는 느낌아닌 느낌인데
이런거는 어떻게 해소를 할까요? (테일윈드 CSS 랑 컴포넌트 CSS 랑 섞이는?)

답글 달기