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

설명하기에 앞서🎉 본 글에서 제공하는 모든 내용은 저작권법에 의하여 보호받는 저작물이지만 이에 대한 무단 복제 및 배포를 환영합니다. 🎉  Aleph Kim's Portfolio Website🖥️ 프로젝트 소개Aleph Kim의 포트폴리오 웹사이트는 개발자의 역량과 프로젝트를 효과적으로 소개하기 위해 제작된 개인 웹사이트입니다.이 프로젝트는 데이터와 UI를 철저히 분리하여 사용자에게 커스터마이징과 확장성을 극대화할 수 있도록 제작하였습니다.🚀 주요 강점: 데이터 분리 구조이 웹사이트는 데이터를 독립적으로 관리하는 구조를 채택하여 개발, 유지보수, 확장성에서 많은 이점을 제공합니다.🛠️ 사용 기술Frontend: Vue.js (컴포넌트 기반 설계)Styling: Tailwind CSS (유틸리티 ..

개요처음으로 컴포넌트 라이브러리를 사용하지 않고 다크모드를 구현하려니 수많은 난관을 만나게 되었다. 다음에는 이번처럼 헤매지 않기 위해 기록해두려 한다.코드tailwind.config.jsclass="dark:text-white"와 같이 다크모드일 경우 스타일 요소를 지정하기 위한 설정module.exports = { purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], darkMode: 'selector', // 3.4.1 버전 이후일 경우 darkMode: 'class'..

개요프로젝트 진행 중 다크모드 전환 간 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]이게무슨이상한코드야로 설정할 수 있..

PHP 8.3 버전 설치 (mac os 기준) 1. 설치 brew install php@8.3 2. 정상 설치 확인 php -v 라라벨 8 버전 프로젝트 생성 (composer 사용) 1. 프로젝트 생성 composer create-project --prefer-dist laravel/laravel:^8 my-laravel-project 2. 서버 실행 cd my-laravel-project php artisan serve 3. 정상 설치 확인 http://127.0.0.1:8000/ tailwind css 설치(Laravel Mix 방식) 1. 설치 cd my-laravel-project npm install -D tailwindcss postcss autoprefixer npx tailwindcss ..

코드 (JQuery, Tailwindcss) 테마 변경 설명 jquery의 attr을 사용해서 html에 할당된 data-theme값을 변경해주고, 새로고침이 되어도 유지가 되도록 localStorage의 get,set item을 사용하여 저장 / 불러오기를 했다. 참고 https://velog.io/@yijaee/%EB%8B%A4%ED%81%AC%EB%AA%A8%EB%93%9C-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0 출처 직접 만들었습니다!