className에 분명히 border border-gray4속성이 들어갔는데 경계선이 생기지가 않는다. border-solid를 넣으면 네 면에 경계가 생기긴한다. 하지만, 그렇게 되면 border-l-4처럼 한 쪽에만 경계선만 생기게 할 수가 없다. border-l-solid는 없는 속성이라고 나온다.
stack overflow에서 위 이슈와 유사한 글을 찾았다. 한 쪽에만 border를 설정하기 위해 아래 코드처럼 className을 설정하였는데, 코드가 너무 길다는 내용이다.
class = "border border-blue-900 border-solid border-t-1 border-l-0 border-r-0 border-b-0"
이 이슈는, border-solid를 설정할 경우 border-solid의 방향을 설정하지 못해, 원하는 방향인 top만 1px로 설정하고, 그 외의 방향은 0px로 설정하여 top만 보이도록 하는 방식이다.
그 글에 마지막 답변 내용이다.
이 이슈를 내가 왜 몰랐나, 이제 알았나 해서 tailwindcss공식 홈페이지에 ‘global’이라고 검색하니 아래 내용이 있었다.
tailwind의 Preflight는 모든 요소의 border-width를 0으로, border-style을 solid로 초기화한다. 이 초기화가 깔려 있어야 border 클래스가 두께만 올려도 1px 실선이 그려진다.
반대로 이 초기화가 적용되지 않으면 border-style은 브라우저 기본값인 none으로 남는다. border로 두께만 올려봐야 선이 보이지 않고, border-solid를 같이 줘야 그제서야 네 면에 경계가 생기는 이유다. 방향별 border-style 유틸리티는 없으므로, 초기화 규칙을 globals.css에 직접 깔아두면 border-l-4처럼 방향 유틸리티만으로 한 쪽 경계선을 그릴 수 있다.
참고로 tailwind v4부터는 border 색의 기본값도 gray-200이 아니라 currentColor다. 색을 따로 지정하지 않으면 글자 색을 따라간다.