.greenFilter {
filter: invert(75%) sepia(51%) saturate(421%) hue-rotate(54deg)
brightness(87%) contrast(90%);
}
.greenFilter2 {
@apply invert-[75%] sepia-[51%] saturate-[421%] hue-rotate-[54deg]
brightness-[87%] contrast-[90%];
}
저 둘의 결과가 왜 다른거임?
.greenFilter와 .greenFilter2는 같은 효과를 내지만, .greenFilter는 CSS filter를 사용하고, .greenFilter2는 Tailwind CSS의 @apply를 사용합니다. CSS filter는 HTML 요소에 직접 적용되는 반면, @apply는 클래스에 적용됩니다. 따라서, .greenFilter는 HTML 요소에 직접 적용되기 때문에, .greenFilter2보다 더 강력한 효과를 낼 수 있습니다.
HTML 요소에 직접 적용되는 반면, @apply는 클래스에 적용됩니다 << 이게 머선말임? 어쨋든 @apply도 dom에다 style 입힌다음 composition 해서 rendering 하는거아님?
Tailwind CSS is a utility-based framework based on CSS. It provides a catalog of CSS classes that makes the process of styling more convenient. Tailwind is not a UI Kit like Bootstrap, Foundation, or Bulma. It does not provide ready-made design blocks. It simply provides classes to make custom designs and prevents the user from writing lengthy code, such as that in Vanilla CSS.