Svelte + TailwindCSS +DaisyUI 개발 환경을 설정하는 방법은 무엇입니까?

프로젝트의 목적

이 게시물에서는 Tailwind CSS 및 DaisyUI 통합을 사용하여 Vite에서 Svelte 환경을 만들기 위한 설정을 다룹니다.

시작하기

기본 Svelte 앱을 설정하려면 다음 명령을 실행할 수 있습니다.

npm init vite my-app -- --template svelte

... 그런 다음 터미널의 프로젝트 폴더로 이동하여 다음 종속 항목을 설치합니다.

cd my-app 

# Install the dependencies...

npm install

...롤업을 시작합니다.

# Npm Command
npm run dev 

localhost:8080으로 이동하면 앱이 실행되는 것을 볼 수 있습니다. src에서 구성 요소 파일을 편집하고 저장한 다음 페이지를 새로고침하여 변경 사항을 확인하세요.

이제 브라우저에서 이것을 볼 수 있습니다!

Tailwind CSS + DaisyUI 설정 추가

이제 다음 명령을 사용하여 npm을 통해 Tailwind CSS 및 DaisyUI 피어 종속성을 설치해야 합니다.

npm install -D tailwindcss postcss autoprefixer daisyui  

이제 기본 디렉토리에 tailwind.config.cjs라는 tailwind 구성 파일을 생성합니다.
tailwind.config.cjs 파일에 다음 코드를 추가합니다.

module.exports = {
    content: ["./src/**/*.{html,js,svelte}"],  theme: {
    extend: {},
  },
  plugins: [
    require("daisyui")
  ],
}

다음으로 기본 디렉토리에 PostCSS 구성 파일(postcss.config.cjs)을 생성해야 합니다.
postcss.config.cjs 파일에 다음 코드를 추가합니다.

module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    }
  }

CSS에 Tailwind 지시문 삽입

모든 페이지에서 액세스할 수 있도록 App.svelte 파일에 삽입하는 것이 가장 좋습니다.

<style global lang="postcss">
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

이제 우리 환경에 Tailwind가 있으므로 웹 사이트 헤더를 편집하여 tailwind가 Svelte와 어떻게 작동하는지 살펴보겠습니다.

이제 다음이 표시됩니다.

결론

이전에 DaisyUI 또는 TailWind 구성 요소를 사용한 적이 없다면 DaisyUI 및 Tailwind 통합으로 생성한 예제 Svelte 프로젝트를 살펴보십시오.

바로 보실 수 있습니다here !

here로 이동하여 Github에서 이 프로젝트의 완성된 템플릿을 확인하세요!

라이선스: 📝

이 프로젝트는 MIT 라이선스(MIT)에 따릅니다. 자세한 내용은 라이센스를 참조하십시오.

기여

기여는 언제나 환영합니다...

🔹 저장소 포크
🔹 현재 프로그램 개선
🔹 기능 개선
🔹 새로운 기능 추가
🔹 버그 수정
🔹 작업 푸시 및 풀 리퀘스트 생성