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

• https://tailwindcss.com/blog/tailwindcss-v3