TailwindCSS v3 출시! 새로운 기능 살펴보기 🎨

소개

Tailwind CSS v3.0이 방금 출시되었으며 멋진 기능이 많이 추가되었으므로 살펴보겠습니다.

이제 JIT가 내장되어 있습니다.

이제 JIT 모드가 TailwindCSS에 내장되어 훨씬 빨라졌으며 쌓을 수 있는 변형, 임의 값 지원과 같은 멋진 새 기능도 사용할 수 있습니다.

많은 새로운 색상

현재 많은 새로운 색상이 있으며 총 22가지입니다!



이제 5가지 다른 회색도 있습니다! 🤯

유색 상자 그림자

유색 상자 그림자는 v3까지 순풍에 없었던 중요한 기능이었습니다. 그러나 마침내 여기에 있고 사용하기 쉽습니다 :D

<button class="shadow-lg shadow-green-500 text-center bg-green-500 text-white px-8 py-3 rounded-full text-xl">Button</button>

몇 가지 수업을 통해 이 아름다운 단추를 줄 수 있습니까?

종횡비

이제 aspect 클래스를 사용하기 위해 플러그인을 사용할 필요가 없습니다. aspect-video , aspect-auto , aspect-square 와 같이 제공된 다양한 유형을 사용하거나 JIT가 이제 내장되어 있으므로 aspect-[9/6] 와 같은 사용자 정의 값을 사용할 수 있습니다. .

스크롤 스냅

이것은 중앙, 시작 또는 끝으로 스냅되는 스크롤 가능한 요소 목록을 가질 수 있는 훌륭한 기능입니다. 이 데모에서는 센터 스냅을 사용하고 있습니다.

<div class="snap-x flex overflow-scroll">
  <img
    class="mx-5 snap-center w-[1000px]"
    src="https://images.unsplash.com/photo-1604537466158-719b1972feb8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80"
  />
  <img
    class="mx-5 snap-center w-[1000px]"
    src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1174&q=80"
  />

  <img
    class="mx-5 snap-center w-[1000px]"
    src="https://images.unsplash.com/photo-1444464666168-49d633b86797?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80"
  />
  <img
    class="mx-5 snap-center w-[1000px]"
    src="https://images.unsplash.com/photo-1559213237-6fdea41b7308?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
  />
</div>

이것은 이와 같은 멋진 스냅 스크롤링 효과를 줄 것입니다.

https://www.loom.com/share/f6bc3808f1044488ad33e2c4a5424f82

스크롤 동작

이제 scroll-smooth 클래스를 추가하여 tailwind CSS에 부드러운 스크롤을 추가할 수 있습니다. 스크롤을 위해 일부 위치에 여백을 추가하려면 - scroll-m-4 와 같이 scroll 접두어를 추가하면 됩니다.

다중 열 레이아웃

Tailwind는 이제 다중 열/신문과 같은 레이아웃을 지원합니다! 필요한 특정 수의 열을 제공하거나 브라우저가 크기에 따라 사용할 열 수를 결정하도록 자동으로 설정할 수 있습니다.

악센트 색상 및 파일 업로드

악센트 색상

이제 브랜드의 테마와 일치하도록 양식을 사용자 지정할 수 있으며 확인란 및 라디오 버튼과 같은 항목의 색상이 변경됩니다.



div/form 태그에 accent-<color>-<shade>를 추가하기만 하면 됩니다.

파일 업로드 버튼

다음과 같이 아름답게 보이도록 파일 업로드 버튼을 사용자 정의할 수도 있습니다.



평소처럼 스타일을 추가할 수 있지만 접두사는 file: 입니다. 내가 한 것과 같은 버튼을 얻으려면 다음을 사용할 수 있습니다.

<input type="file" class="file:bg-emerald-200 file:px-4 file:py-2 file:rounded-full file:border-none file:text-emerald-900 file:text-lg file:font-semibold"/>

멋진 밑줄

이제 밑줄의 색상, 두께 및 스타일도 변경할 수 있습니다!



이러한 스타일을 사용하려면 decoration-red-600 decoration-wavy를 사용해야 스타일이 다음과 같이 표시됩니다.

<p class="underline decoration-red-600 decoration-wavy">I have squigly underline</h1>

결론

TailwindCSS 팀은 또한 몇 가지 더 멋진 기능을 출시했는데, 저는 제가 가장 흥미로웠던 것을 강조 표시했습니다. Tailwind에 대해 자세히 알아보려면 Tailwindwebsite 😉를 확인하세요. 다음에 만나요✌️

유용한 링크

TailwindCSS

Tailwind's video on the release

Connect with me