Microsoft Student (2023)728x90
728x90
daisyUI 테마 설정하기
들어가며
- 테일윈드 CSS의 확장 라이브러리인 daisyUI를 이용하여 페이지에 테마(Theme)를 적용하는 방법을 정리해본다.
방법
테마 고르기
- dasiyUI의 공식 문서에서 원하는 테마를 선택한다.
daisyUI themes — Tailwind CSS Components ( version 4 update is here )
How to use daisyUI themes?
daisyui.com
- 이 페이지에서는 드라큘라 테마(
dracula)를 선택했다고 가정한다.
테일윈드 CSS 설정 파일에 추가하기
- 테일윈드 CSS 설정 파일인
tailwind.config.js파일에 아래의 테마 속성을 추가해준다.
./tailwind.config.js
/** @type {import('tailwindcss').Config} */ export default { content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], theme: { extend: {}, }, plugins: [require('daisyui')], daisyui: { themes: ['winter', 'dracula'], // 추가 }, };
index.html 파일에 적용해주기
- 프로젝트 최상단 경로(
/)에 있는index.html파일의<html>요소의class속성의 값을 테마 이름(darcula)로 지정해준다.
./src/index.html
<!DOCTYPE html> <html lang="en" class="dracula"> <!-- 클래스 값을 테마 이름으로 적용 --> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/store.png" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Comfy Store</title> </head> <body> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body> </html>
확인하기
- 다음과 같이 테마가 적용된 페이지를 확인할 수 있다.
참고 사이트
daisyUI themes — Tailwind CSS Components ( version 4 update is here )
How to use daisyUI themes?
daisyui.com
728x90
728x90
'Framework > Tailwind CSS' 카테고리의 다른 글
| [Tailwind CSS] Prettier 적용하기 (1) | 2025.06.24 |
|---|---|
| [Tailwind CSS] sr-only 클래스 (0) | 2024.11.05 |
| [Tailwind CSS] asChild 속성 (0) | 2024.10.21 |
| [Tailwind CSS] shadcn/ui (0) | 2024.10.20 |
| [Tailwind CSS] 테일윈드 설정 파일(tailwind.config.js)에서 플러그인(Plugin) 추가할 때 "'require' is not defined" 오류가 뜰 때 해결법 (0) | 2024.09.29 |
| [Tailwind CSS] daisyUI (1) | 2024.09.29 |
| [Tailwind CSS] 자주 사용되는 테일윈드 CSS 클래스 정리 (0) | 2024.09.27 |
| [Tailwind CSS] Tailwind CSS (0) | 2024.09.27 |