tailwindcss 3버전에 flowbite 추가 하기

개같은 tailwind 컴포넌트를 유료로 판다

대체재로 flowbite를 써보자...

1) tailwindcss를 3버전으로 설치했으니

npm install flowbite
하지마세요

냅다 갈기는 순간 바로 버전 불일치가 난다. npm uninstall 해주면 된다.

 

2) 버전 확인은

npm ls tailwindcss
npm list tailwindcss

둘 중에 아무거나 하면 볼 수 있다.
tailwindcss와 flowbite 버전이 일치하지 않으면 flowbite는 tailwind 4버전이라고 나오고, 설치된 tailwind는 3버전이라고 나온다.

 

3) 3버전을 명시해서 설치하려면

npm install flowbite@3

 

4) 설치를 마치고 node_modules\flowbite\dist\flowbite.min.js를 HTML에 어떻게든 포함시켜주면 된다
thymeleaf라면 static에 넣고 src해버려도 상관없다.

5) 컴포넌트를 가져올 때 꼭 flowbite 사이트에서 3버전을 체크해서 가져와야 한다.
바뀌면 얼마나 바뀌었겠어...라고 생각하기엔 걍 아예 작동을 안 한다.