Next.js + Windi css

React의 SSR(서버 사이드 렌더링)을 위한 프레임워크인 Next.js

개발편의성이 리액트보다 좋다는 평이 많음

 

Windi css는 Tailwind css 와 스타일을 공유하지만 몇가지 유틸성이 추가되었다

(현재 Tailwind css는 v.3 이지만 Windi css는 Tailwind css v.2를 계승했다 완전히 같지는 않지만 유사한 점이 많다)

 

1. 클래스에 특정값을 지정할 수 있음.

테일윈드에서는 지정된 클래스 속성값을 넣어야 했으나 Windi css는 bg-[#FFFFFF] 이런 식으로 값을 지정할 수 있다.

 

2. breakpoint를 활용하여 스타일을 지정하는 것뿐(sm:w-full md:w-2/3) 아니라, 특정 폭 이상 이하를 < 를 사용하여 지정할 수 있다.

 

3. 가상선택자를 사용한 스타일지정을 하나로 묶을 수 있다. (hover: 를 썼다면 hover:를 공통으로 관련 스타일을 묶을 수 있음)

 

4. 스타일에 !important를 !만 추가해서 적용할 수 있다.

 

5. windi.config.js(윈디 설정파일)에서 shortcuts:{     }, 을 지정하여 스타일 양식을 지정해서 사용할 수 있다.

예시)

shortcuts: {
    'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
    },

스타일을 작성할 때 이렇게 축약한 스타일클래스명을 사용할 수 있는 것이다.

 

6. 역방향 텍스트는 rtl: 을 적어주면 된다.

 

7. 다크모드는 dark:를 붙여준다.

 

5번의 경우, tailwind는 css파일에서 @apply 를 붙인 후 tailwind 스타일을 지정해주면 해당 클래스에 스타일이 입혀진다.

전역으로 적용하고 싶으면 global.css에 적고, 지엽적으로 적용하고 싶으면 module.css에 적어주고 해당 컴포넌트에 import해서 사용하면 된다.

.card {
@apply w-20 bg-stone-100 mx-auto my-6
}

---

Windi css는 angular을 제외한 대부분의 프레임워크를 지원하는데, Next.js에서 Windi css 사용 시에 간헐적으로 css 클래스 스타일이 적용되지 않는 현상이 생겼다. - 2022 / 04 / 30

그러나 처음에는 잘 적용되었던 부분이라 오류메세지도 없어 고민됐는데, 다른 분의 말씀을 들어보니 Webpack을 사용하는 Gatsby 등에서도 간혹 발생하는 현상이었다고 들었다.

정확한 이유는 모르겠으나, 이후에도 동일 증상이 반복적으로 나타난다면 Uno css를 사용해볼 것을 추천받았다.

 

https://dev.to/composite/windicss-tailwindcss-4gi6

WindiCSS - TailwindCSS 대안