[Next.JS] 싱글페이지 만들기 : Tailwind.css 그리고 daisy UI

개쩌는(희망사항) 넥스트 프로젝트를 시작해보자. 

 

CNA 해주시고 프로젝트 구조 설정 해주세요. (지난주 완료)

 

링크참고

[리액트에서 Next로] Next.js 기초 : 초기 프로젝트 설정부터 네비게이션

 

 

나는 프론트엔드니까 daisy ui 쓸 것 

Tailwind Navbar Component — Tailwind CSS Components ( version 4 update is here )

 

어라 문제 발생

 

이렇게 된 이유는 간단했다. 

Plugin 추가를 안했기 때문이다. 

 

 

---

그래서 준비한 Daisy UI 적용방법

 

1. 홈페이지에 들어가자

Install daisyUI as a Tailwind CSS plugin — Tailwind CSS Components ( version 4 update is here )

 

2. 문서를 꼼꼼히 읽자.

2-1.

npm i -D daisyui@latest

 

2-2. Then add daisyUI to your tailwind.config.js files:

module.exports = {
  //...
  plugins: [require("daisyui")],
}

 

 

잊지마시오.... 테일윈드에 적용하기

 

3. 테마가 쓰고 싶다

daisyUI themes — Tailwind CSS Components ( version 4 update is here )

 

3-1. 원하는 테마를 플러그인 아래에 추가

module.exports = {
  //...
  daisyui: {
    themes: [
      "light",
      "dark",
      "cupcake",
      "bumblebee",
      "emerald",
      "corporate",
      "synthwave",
      "retro",
      "cyberpunk",
      "valentine",
      "halloween",
      "garden",
      "forest",
      "aqua",
      "lofi",
      "pastel",
      "fantasy",
      "wireframe",
      "black",
      "luxury",
      "dracula",
      "cmyk",
      "autumn",
      "business",
      "acid",
      "lemonade",
      "night",
      "coffee",
      "winter",
      "dim",
      "nord",
      "sunset",
    ],
  },
}

 

 

3-2. 원하는 테마가 없거나 글씨 색상 변경을 원해

 

 

module.exports = {
  //...
  daisyui: {
    themes: [
      {
        mytheme: {
          "primary": "#a991f7",
          "secondary": "#f6d860",
          "accent": "#37cdbe",
          "neutral": "#3d4451",
          "base-100": "#ffffff",
        },
      },
      "dark",
      "cupcake",
    ],
  },
}

 

---

 

얼레벌레 Navbar랑 home 페이지 완성

 

반응형? 당연히 해야지