-
[TailwindCSS v4.0] 버그/오류 해결 모음개발 일기/오류 일기 2025. 3. 24. 23:24728x90728x90
1. npx tailwindcss init 에러 / tailwind.config.ts 파일 없음
tailwindcss 생성 중 init 실행 시 npm err! 이라는 에러가 떴습니다. 게다가 여러 설정을 하려고 보니 tailwind.config.css 파일이 없었습니다. Gpt에게 물어봤으나 모두 tailwind.config.css 파일을 확인하라는 말만 반복하길래 설마 아직 업데이트 안 된 에러인가 했습니다. 그래서 Tailwind 공식 문서를 확인해보니, 4.0 버전 이후로 init 명령어가 안 되고 tailwind.config.css 파일이 없어졌다고 합니다. 설정하는 방법은
/* global.css */ @import "tailwindcss";tailwindcss가 이미 설치된 파일이라는 가정 하에 css 파일에 저렇게 선언해주시면 됩니다. 저 같은 경우에는 색을 설정해줘야 했습니다. 새로운 tailwindcss 파일에서 색 설정하는 방법은 이렇습니다.
@theme { --color-색이름: 색코드 }2. tailwind 색 설정이 안 됨
위의 방식대로 색을 설정했으나, 다른 속성들은 잘 적용 됐으나 색 변수로 선언한 부분들만 작동되지 않았습니다. 다시금 공식 문서를 읽어보니 모든 예시들이 oklch라는 코드로 되어있습니다. 아마 이번 업데이트에서 이 부분도 수정된 것 같습니다. 그래서 최종 코드는 이런 방식입니다.
@theme { --color-색이름: oklch(색 코드(퍼센트)/투명도(퍼센트)) /* 예시 */ --color-newBlack: oklch(43.13% 0 0 / 80%); }기존 색 코드는 https://oklch.com/#70,0.1,314,100 이곳에서 변환하면 됩니다.
3. Next-themes 설정
Next-themes를 사용하기 위해서는 역시나 tailwind.config.ts 파일을 설정해줘야 하지만? 역시나 없습니다. 그래서 확인해보니 npm으로 설치만 끝났다면 따로 설정하지 않아도 됩니다.
"use client"; import { ThemeProvider } from "next-themes"; import { FC } from "react"; export const Providers: FC<{ children: React.ReactNode }> = ({ children }) => { return ( <ThemeProvider enableSystem={true} defaultTheme="system"> // enableSystem-> 운영체제에서 어떤 모드인지 가져오기 // defaultTheme-> 기본적으로 어떤 모드로 할지, system은 사용자가 컴퓨터에 설정한 모드를 따름 {children} </ThemeProvider> ); }; export default Providers;<html lang="kr" suppressHydrationWarning> <body className="flex justify-center w-full h-[100vh]"> <Providers> <QueryClientProvider client={queryClient}> <body className="flex justify-center w-full h-[100vh]"> <div className="w-[375px] h-[812px]">{children}</div> </body> </QueryClientProvider> </Providers> </body> </html>방식으로 사용했습니다.
4. TailwindCSS 라이브러리 없이 스크롤바 없애기
기존 TailwindCSS에서도 스크롤바 없애는 기능은 없었습니다. 기존에는 tailwind-scrollbar-hide 라이브러리 사용 후 config 파일에서 설정해야 했는데... 역시나 최신 버전에는 그 파일이 없습니다. 그러니 라이브러리를 사용할 수 없습니다. 그 대신 css 파일에서 클래스로 설정해주면 됩니다.
@layer utilities { .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } }<div className="no-scrollbar" />728x90'개발 일기 > 오류 일기' 카테고리의 다른 글
[Vue] 버그 / 오류 해결 모음 (0) 2024.12.30 [Github] main and branch are entirely different commit histories 해결 (0) 2023.12.30 [MySQL] 버그 / 오류 해결 모음 (0) 2023.12.24