tailwind에서 제공하는 단축어 사용 Handling Hover, Focus, and Other States - Tailwind CSSUsing utilities to style elements on hover, focus, and more.tailwindcss.com 그러나 내가 쓰려는 건 없다... tailwind + CSS 직접 작성/* 토요일 */#calendar-body span:nth-child(7n - 1) { @apply text-primary-500;}/* 일요일 */#calendar-body span:nth-child(7n) { @apply text-red-500;} 기본 CSS 적용하는 방법 + @apply 디렉티브
분류 전체보기
Tailwind CSS는 일반적으로 인라인에 사용하기 때문에 html 코드가 길어져서 가독성을 저해한다는 단점이 존재한다.그래서 Tailwind CSS가 너무 길면 줄바꿈을 실행하는 방법을 찾아봤다. Break long class names into multiple lines? [Prettier Plugin] · tailwindlabs tailwindcss · Discussion #7763Hey guys, it's not uncommon for class names to become very long, it's pretty hard to maintain and read. I somehow always break those class names into multiple lines manually, se..
Icon · Nuxt ModulesIcon module for Nuxt with 200,000+ ready to use icons from Iconify.nuxt.com 기본 세팅설치npm i -D @nuxt/icon nuxt.config.tsexport default defineNuxtConfig({ modules: [ '@nuxt/icon' ]}) 사용 방법1. Iconify provider 사용export default defineNuxtConfig({ icon: { size: '14px', class: 'icon', mode: 'svg', provider: 'iconify' },});provider를 iconify로 하면 별도의 데이터셋을 프로젝트에 저장할 필..
CSS 확장자 파일에 작성한 내용인데 CSS에는 @tailwind라는 문법이 없기 때문에 발생하는 경고 메시지이다. vscode의 settings.json의 CSS Lint:Unknown At Rules 설정을 바꿔준다.
[ Nuxt, Tailwind ] custom color 적용primary로 정의하고 싶어 tailwind.config.mjs 파일에 추가할 컬러를 작성해줬다. export default { theme: { extend: { colors: { primary: { 50: "#EFF7FF", ... }, }, }, },}; 분명 공식 문서에서는 tailwind config 파일에 이렇zodev.tistory.com이전 글의 방법이 되지 않을 경우에는,,, 공식 문서의 방법으로 회귀하는 방법이 있습니다. 참고로 다른 프로젝트이기 때문에 환경에 따라 사용에 차이가 생긴 것 같다.근데 사실 원인은 잘 모르겠다... // ❌ 이렇게 쓰지 마세여export default { // ... content: [ ..
primary로 정의하고 싶어 tailwind.config.mjs 파일에 추가할 컬러를 작성해줬다. export default { theme: { extend: { colors: { primary: { 50: "#EFF7FF", ... }, }, }, },}; 분명 공식 문서에서는 tailwind config 파일에 이렇게 정의하면 된다고 했는데,… export default { theme: { extend: { colors: { myColor: { 50: "#EFF7FF", ... }, }, }, },};뭐 이런 식으로 색상 명을 ..
이번에는 글꼴 파일을 다운로드받아 프로젝트 폴더에 저장하여 쓰는 방법이 아니라 web font를 적용하는 방식을 택해봤다. 참고로 web font url은 pretendard 글꼴 홈페이지에 친절하게 나와있다. Web Font 적용1. font.css@font-face { font-family: "Pretendard-Regular"; src: url("") format("woff"); font-weight: 400; font-style: normal; } 2. nuxt.config.tsnuxt.config 파일에 @font-face를 작성한 css 파일을 등록해준다.export default defineNuxtConfig({ // ... css: ["~/assets/css/index.css", "~/as..
기본 적용설치npm install pinia @pinia/nuxt configexport default defineNuxtConfig({ modules: [ "@pinia/nuxt", ],}) storestores 디텍토리 생성 후 하위 store 파일 생성(nuxt는 stores 폴더 내에 정의된 모든 store을 auto imports 한다.)export default defineStore("userStore", () => { const user = ref({ name: "Yong", id: 1, number: "123", }); return { user };}); 사용 변경 ➡ {{ user.name }} 그러나 이 경우 새로고침 시..
윈도우 Releases · coreybutler/nvm-windowsA node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windowsgithub.com 1. nvm-window 최신 버전 다운로드 2. 설치 가능한 노드 버전 확인npm list available 3. 새로운 노드 버전 설치nvm install 18.20.4 4. 설치된 노드 버전 목록 확인nvm ls 5. 노드 버전 변경nvm use 18.20.4
primevue는 vue에서 많이 쓰이는 UI 라이브러리이고, 문서가 깔끔하게 잘 되어있다는 장점이 있다. 특히나 pass through를 이용해 css 커스텀을 쉽게 할 수 있는 것도 굉장히 편리하다. primevue 설치npm install primevuenpm install --save-dev @primevue/nuxt-module// stylednpm install @primevue/themes nuxt.config.ts 파일에 모듈 등록export default defineNuxtConfig({ modules: [ '@primevue/nuxt-module' ], primevue: { /* Configuration */ }}) 기본 테마 쉽게 사용..
