728x90 반응형 Tailwind CSS2 [tailwind css] 동적으로 클래스 할당하는 법 문제 상황 클릭할 때마다 progress바의 progress의 width가 20%씩 증가되는 UI를 구현하고 싶었다. 그래서 처음에 구현했던 코드는 아래와 같다. 여기서 key는 0 ~ 4(스킬의 개수)까지의 값이다. 아무튼 이렇게 동적으로 width가 계산되어 tailwindcss가 정상적으로 적용이 된다고 생각했지만 그게 아니였다. progress가 60%인 경우에는 적용이 됐다 안됐다 하는 문제가 있었다.. 클릭 해결 방법 1. 문제를 구글링해보니 tailwind css에서 동적으로 값을 할당할 때 생기는 문제였고, 나와 비슷한 문제를 겪은 분이 있었다. Next.js and Tailwind can't use template string for applying classes problem 나처럼 화.. 2023. 2. 8. [css] tailwind css 설치하는 법 tailwind css 설치하는 법 1. 터미널에 아래의 코드를 입력해 tailwind css 설치하기 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p 2. 자동으로 생성된 tailwind.config.js 파일의 content에 해당 코드를 추가하기 content: [ './src/**/*.{js,jsx,ts,tsx}', ], 3. 그리고 src/App.css 파일의 제일 상단에 3줄의 코드를 작성하기 @tailwind base; @tailwind components; @tailwind utilities; 4. 잘 작동하는지 확인하기 위해 src/App.tsx 파일로 와서 실험해 보기 import "./App.css"; f.. 2023. 1. 29. 이전 1 다음 728x90 반응형
