개요vue로 포트폴리오 프로젝트 진행 중 특정 클래스들을 추가하는 코드를 별도의 데이터 파일로 관리했더니 해당 클래스의 빌드가 정상적으로 이루어지지 않는 오류가 발생했다.해결방법// tailwind.config.jsmodule.exports = { ... safelist: [ 'text-gray-500', // 미리 빌드하고 싶은 클래스 { pattern: /bg-(red|blue|green)-(100|200|500)/, // 정규식을 사용하여 여러 클래스 포함 variants: ['hover', 'focus'], // 변형 클래스 포함 (예: hover:bg-red-500) }, ], ...}

개요프로젝트 진행 중 다크모드 전환 간 tailwindcss로 transition 값을 설정한 요소의 transition이 매끄럽지 않음을 발견하게 되어 이를 해결할 방법을 찾아보았다.원인tailwindcss로 transition을 설정할때 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);라는 값이 포함되는데, 이로 인해 기본 css로 transtion을 설정했을 때와 차이가 발생함을 확인했다.해결 방법transition-timing-function 값을 기본값으로 설정해주면 된다.찾아보니 transition-timing-function의 기본값은 ease값이라고 한다. tailwindcss에서는 ease-[ease]이게무슨이상한코드야로 설정할 수 있..

코드 See the Pen Untitled by 김채민 (@aleph-kim) on CodePen.출처https://cloud-library.tistory.com/entry/CSS%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EA%B0%84%EB%8B%A8%ED%95%9C-%ED%83%80%EC%9D%B4%ED%95%91-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98

개요디자인적으로 안 좋을 것 같지만... 태그에 hover시 테두리가 무지개색으로 빛났으면 좋겠다는 생각이 들었다.코드/* 무지개 효과 */div:hover{ animation-duration: 5s; animation-name: rainbowLink; animation-iteration-count: infinite;}@keyframes rainbowLink { 0% { border-color: #ff2a2a55; } 15% { border-color: #ff7a2a55; } 30% { border-color: #ffc52a55; } 45% { border-color: #43ff2a55; } 60% { border-color: #2a89ff55; } 75% { border-color: ..

코드 게시판 공지 게시판 자유 게시판 사용 시 참고 https://goodsgoods.tistory.com/249

표 유형 설명 기본 예제 Spec text (en-US) 디폴트 값. 한줄의 텍스트 필드입니다. 새줄 문자는 입력값으로부터 자동으로 제거됩니다. password (en-US) 값이 가려진 한줄 텍스트 필드. 사이트가 안전하지 않으면 사용자에게 경고합니다. email (en-US) 이메일 주소를 편집할 수 있는 필드. 텍스트 입력 필드처럼 보이지만 유효성 검증 매개변수가 존재하며, 브라우저와 장치가 동적 키보드를 지원하는 경우 이메일에 적합한 키보드를 보여줍니다. HTML5 button 기본 행동을 가지지 않으며 value을 레이블로 사용하는 푸시 버튼. file 파일을 지정할 수 있는 컨트롤. accept 특성을 사용하면 허용하는 파일 유형을 지정할 수 있습니다. hidden (en-US) 보이지 않지만..

코드 html > body, html > body .toastui-editor-contents, html > body .ProseMirror, html > body .toastui-editor-md-code, html > body .toastui-editor-md-code-block { font-family: "my-font", sans-serif; text-underline-position: under; } 사용 font-family: "my-font" 자리에 font-family 명을 쓰면 된다. 출처 유튜브 몰입코딩 아카이브