새로운 Cool Tailwind CSS 속성

접근성까지 챙기며 진화하는 모습이 너무 좋아요

Tailwind CSS 버전 3 이후의 새로운 기능부터 살펴보겠습니다. 버전 3.4가 최신 버전이므로 늦을 수도 있습니다.

우리 대부분은 필요하거나 필수가 되는 경우를 제외하고는 일반적으로 저장소의 패키지를 업데이트하지 않습니다.

그 심정은 이해합니다. 그렇기 때문에 적어도 새 저장소를 만들 때마다 패키지만 업그레이드할 것이라고 생각합니다.

본론으로 돌아가서, 저는 지난 4년 동안 Tailwind CSS를 사용해 왔으며 이 CSS를 좋아합니다. 우리 중 대부분은 CSS의 일부 또는 핵심 스타일을 지정할 때 순풍 CSS를 작성한다고 해서 좋은 프런트엔드 개발자가 될 수는 없다는 주장을 제기할 수 있습니다.

시간이 지남에 따라 tailwind CSS가 간단한 CSS 작성과 관련된 몇 가지 문제를 가져오는 것을 경험했지만 이는 대부분 구문과 관련이 있으며 요소 스타일 지정 및 애니메이션 추가의 핵심 개념은 여전히 ​​동일합니다.

구문의 차이일 뿐이에요

CSS in JSX
transform: “”, 

Tailwind CSS
transform:transition-all, 

이제 기본 사항을 이해하고 나면 구문에는 큰 차이가 없습니다.

애니메이션 작성에는 JSX의 CSS를 선호하고 간단한 스타일링에는 Tailwind를 사용합니다. 그래서 대부분의 저장소에는 개발자가 원하는 구문으로 작성할 수 있는 유연성이 제공됩니다.

Tailwind CSS의 새로운 점이나 멋진 점은 무엇인가요?

Tailwind 개발자들은 접근성과 애니메이션 개발에도 많은 노력을 기울이고 있습니다.

개발자들은 간단한 CSS나 GSAP 또는 프레이머-모션과 같은 다른 애니메이션 라이브러리를 사용한 것처럼 Tailwind CSS를 사용하여 복잡한 애니메이션을 작성하는 것에 대한 우려를 제기했습니다.

나누다

https://tailwindcss.com/docs/divide-style

대부분의 경우 열 사이에 구분선을 추가하려고 하며 이것이 Divider 속성이 내부적으로 수행하는 작업입니다. 분할 모양이 필요한 플렉스 순서로 배열된 요소에 테두리 너비를 추가합니다.

선형 그라디언트

https://tailwindcss.com/docs/Background-image#linear-gradients

스크린 리더

https://tailwindcss.com/docs/screen-readers

캐럿 스타일링

https://tailwindcss.com/docs/caret-color

스냅 컨트롤

https://tailwindcss.com/docs/scroll-snap-type

크기 조정

https://tailwindcss.com/docs/resize

모습

https://tailwindcss.com/docs/appearance?source=post_page------eeea98808df1

악센트 색상

https://tailwindcss.com/docs/accent-color

오늘은 여기까지입니다. 다음 시간에 만나요

구독과 팔로우 부탁드려요!!

슈리

위 내용은 새로운 Cool Tailwind CSS 속성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!