@tailwindtailwind의 base, components, utilities, variants 스타일을 적용하기 위해 사용하는 디렉티브/** * Tailwind의 기본 스타일과 플러그인이 등록한 모든 기본 스타일을 삽입 */@tailwind base;/** * Tailwind의 컴포넌트 클래스와 플러그인이 등록한 모든 컴포넌트 클래스를 삽입 */@tailwind components;/** * Tailwind의 유틸리티 클래스와 플러그인이 등록한 모든 유틸리티 클래스를 삽입 */@tailwind utilities;/** * 각 클래스의 hover, focus, responsive, dark mode 등 다양한 변형 클래스의 삽입 위치를 제어 * * 생략할 경우 Tailwind는 기본적으로 이러한 클..
tailwind
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 디렉티브
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", ... }, }, }, },};뭐 이런 식으로 색상 명을 ..
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 */ }}) 기본 테마 쉽게 사용..
ESLint코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동 검출하는 도구JS코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구 (에러 표시)다양한 방식으로 구현할 수 있는 코드 방식을 일관성있게 구현할 수 있도록 잡아준다.처음부터 유용하게 사용할 수 있는 스타일 가이드(built-in rule)을 제공하지만 개발자가 자신의 스타일 가이드를 작성할 수도 있다. ESLint Module - Nuxt ESLintAll-in-one ESLint integration for Nuxt. It generates a project-aware ESLint flat config and provides the ability to optionally run ESLint check along side the dev..
