어리둥절 분석가 그리고 개발자

✔️ 필요성 Tailwind로 개발한 프로젝트에서 다음과 같은 에러가 발생하고 접속 속도가 엄청나게 오래 걸렸습니다. cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS confi..

✔️ purge options이 사라졌다 원래 Tailwind V2를 쓸 때에는 tailwind.config.js에서 purge option을 지정해야했는데 V3이 되면서 더이상 purge options을 쓰지 않도록 변경되었다. build 명령어를 실행했을 때 warning이 발생한다. npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch ✔️ purge options이 사라졌다 tailwind CSS 공식 문서를 참고하니 purge를 사용하지 않고 content에서 더 잘 사용하면 된다고 한다. Content Configuration - Tailwind CSS Configuring the content sources for your proj..

필요성 변수값이 A일 때는 a라는 스타일링을 보여주고, 변수값이 B일 때는 b라는 스타일링을 보여주는 것 조건문에 따라서 CSS 스타일링을 바꾸고 싶은 건 당연한 거 아니냐구 기본 중의 기본이라고..... 에러 tailwindCSS 공식문서에 가보면 아래와 같이 변수값을 활용해서 conditionally 다른 css를 적용할 수 있다고 나와있다. 그런데 안된다............ 해결 : template string을 사용 ES6의 주요 기능인 템플릿 문자열(template string)을 이용해야 하면 성공이다. 템플릿 문자열이란 문자열안에 변수를 넣을 때 보다 직관적이고 읽기 쉽게 도와주는 기능으로 backtick 사이에 문자열을 넣고, 그 속에 변수를 넣고 싶을 때는 ${} 사이에 변수를 넣을 수..

tailwindCSS에서 배경이미지 사용하기 https://tailwindcss.com/docs/background-image#background-images Background Image - Tailwind CSS Utilities for controlling an element's background image. tailwindcss.com div 태그에서 내가 원하는 이미지로 배경을 만들기 위해서는 tailwindCSS 문서를 읽고 진행하면 된다~ group-hover로 배경이미지 없애기 다른 element와 배경을 group으로 묶은 뒤 hover 효과로 배경이미지를 없애고 다른 요소가 나타나게 하고 싶은데, 이 배경이미지가 안 없어진다. CSS를 뜯어보니, 배경이미지가 !important로 박혀..