TAILWIND5 모노레포의 공통 ui 컴포넌트에 tailwind 적용 안될 때 (turborepo, tawilwind) 이전 포스팅에서 공통된 tailwind-config을 생성하여 apps/web에 적용시키는 것을 학습하였다.똑같은 방식으로 packages/ui에 컴포넌트를 생성한 후 tailwind 들을 적용시킨 뒤 webs 에서 사용할려고 하는데 공통 컴포넌트에 작성해두었던 tailwind가 먹히지 않는 사례가 생겼다.packages/ui 에 tailwind config도 똑같이 적용시켰는데 안되는 것에 대해 여러 삽질을 해본 결과 apps/web/tailwind.config.ts의 content에 /packages/ui에 있는 요소들에게도 tailwind를 입혀줘야한다고 설정하지 않아서였다.즉, // apps/web/tailwind.config.jscontent: [ "./pages/**/*.{js,ts,js.. 2024. 12. 11. 모노레포로 공통 된 tailwind config를 생성하기(turborepo, next.js, tailwind) - 2024.12.11 기준 turborepo에서 제공하는 with tailwind 옵션을 통해 초기 셋팅을 한다면 tailwind-config가 자동으로 추가되지만 학습 목적을 가지고 기본 셋팅을 통해 추가해 봄. pnpm dlx create-turbo@latest --example with-tailwind( 옵션을 통해 추가하는 방법은 위 cli를 입력해주면 됨. 링크)목적 - 공통으로 쓰일 tailwind config 을 만들어서 각 패키지에 적용시키기turborepo의 공식 문서에서는 패키지 매니저를 pnpm을 추천하여 pnpm으로 진행1. turbo 전역 설치 pnpm install turbo --global2. 초기 셋팅pnpm dlx create-turbo@latest위 명령어를 실행하면 packages 와 apps .. 2024. 12. 11. [CSS] shadcn ui - 공유 UI 컴포넌트 공유 컴포넌트 3대장 MUI ( Matrerial UI) - 오픈 소스 React Component Library Ant Design React Bootstrap 개인적으로 위 3대장은 커스텀 하기가 어려워 요즘 뜨고 있는 shadncd ui를 사용해봄 shadcn ui는 Radix-ui를 기반으로 하고 있음 Radix ui 란 고품질의 액세스 가능한 디자인 시스템 및 웹 앱을 구축하기 위한 오픈 소스 UI 컴포넌트 라이브러리. 접근성, 사용자 정의, 개발자 경험에 초점을 맞춘 하위 수준의 UI컴포넌트 라이브러리 shadcn ui의 특징 Accessible : 컴포넌트는 가능한 경우 WAI-ARIA 설계 패턴을 준수합니다. aria 및 role 속성, 포커스 관리 및 키보드 탐색을 포함하여 접근성과 관련.. 2023. 8. 9. CLS 함수를 이용해서 속성값 주기 블라 2022. 11. 25. inline, block, inline block 비교 ( tailwind로 실습 ) 1. inline 컨텐츠 자체만을 꾸며준다. css에서 width | height 크기를 정해주어도 컨텐츠 크기에 맞춰서 변경이 된다. const css = () => { return ( 1asdasdasd 2 3 ); }; export default css; 2. block div가 갖게 되는 기본값 기본적으로 width가 자신의 컨테이너의 100% 갖게 됨. 설정시 그에 맞춘 값만 할당 컨텐츠가 벗어나도 설정한 w,h만 가져감 const css = () => { return ( block 1 block 2 block 3asdsadasdasd ); }; export default css; 3. inline-block inline + block 특성을 합친것 기본적으론 inline 속성이고 크기 설정시 .. 2022. 11. 25. 이전 1 다음
