프론트엔드/TailwindCSS2 다크모드 적용 방법 기본적으로 사용자 시스템 기반으로 다크모드를 설정하려면 dark라는 접두사를 사용해서 쉽게 다크모드를 저용할 수 있음. Writes Upside-Down The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space. CSS의 미디어 쿼리인 prefers-color-scheme를 사용하면 사용자의 OS를 기반으로 한 다크모드를 활성화할 수 있음.만약 토글링으로 해주고 싶다면?추가적인 설정을 해줭함.테일윈드 설정에서 darkMode속성을 활성화하고/** @type {import('tailwindcss').Config} */.. 2024. 11. 27. dynamic 클래스가 안될 때 아래처럼 rotate-[${변수}deg] 이런 식으로 변수를 사용해서 tailwindCSS 클래스를 사용하려고 하면 안 됩니다. for (let i = 0; i < count; i++) { const element = ( ); list.push(element); } 안 되는 이유는 tailwindCSS가 빌드 타임에 검사를 하는데 안 쓰는 클래스들은 제거하기 때문입니다. 제가 해결한 방법은 사용할 클래스들을 미리 작성해 두고, watilwind.config.js 파일에서 해당 파일을 명시하는 것으로 해결했습니다. 일단 유틸 파일로 빼두고요. // size.ts // rotate deg export const ROTATE_DEG = [ 'rotate-0', 'rotate-1', 'rotate-2', 'ro.. 2023. 8. 9. 이전 1 다음
