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] 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 |
| [Tailwind CSS] whitespace-pre-wrap 클래스 (0) | 2024.06.02 |