tailwind CSS 의 효율성

Question

사이드 프로젝트를 진행 중인데 tailwind CSS를 도입하여 만들어 보려고 합니다. 디자이너분이 계셔서 피그마를 통해 만들어주신 작업물을 퍼블리싱 해봤는데 아래와 같은 상황이 발생했습니다. tailwind CSS 에서 제공하는 클래스로는 디자이너 분이 만들어주신 피그마에 나와있는 fontSize의 px 값을 지원하지 않는 경우가 있었습니다. 계속 작업을 하면서도 뭔가 비효율적인 것 같은 느낌이 들어서 질문을 드립니다. 디자이너 분도 tailwind CSS 프레임워크를 어느정도 파악하시고 작업을 진행하는 것이 좋을까요 ?

rockabyebaby · Answer

Arbitrary Value는 []로 따로 설정할 수 있습니다.예를 들어 width: 379px; 이라면 w-[379px]로 지정하시면 됩니다.

Clickin · Answer

tailwind에서 기본제공하지 않는 크기로 쓰고싶으시면 외부 정의파일에 따로 정의하시거나아니면 text-[14px] 같은 형식으로 사용하시면 됩니다디자이너가 픽셀 단위로 작업한다면 되도록 외부 정의파일 tailwind.config.js 혹은 tailwind.config.cjs 등 에 따로 정의하시는 편이 좋겠습니다.https://tailwindcss.com/docs/font-size

몰랑토끼 · Answer

변환하는거 몇번 찾아보니 금방 나오던데요..https://fe-developers.kakaoent.com/2022/220303-tailwind-tips/

킁킁탐정 · Answer

https://www.figma.com/community/plugin/785619431629077634/Figma-Tailwindcsshttps://github.com/jan-dh/figma-tailwindcss/

tailwind CSS 의 효율성

4개의 답변

Q&A 목록