스벨트에서 Flowbite 설치 방법

1. 스벨트 새 프로젝트를 생성합니다.

https://blog37.tistory.com/entry/%EC%8A%A4%EB%B2%A8%ED%8A%B8-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95-%EB%B0%A9%EB%B2%95

스벨트 설치 방법

 

2. 스벨트 project 폴더 주소창에서 cmd를 입력 후 Enter키를 눌러 윈도우 '명령 프롬프트'를 실행합니다.

 

3. 실행된 윈도우 '명령 프롬프트'에서 아래의 명령어를 순차적으로 실행시켜 tailwindcss와 flowbite를 설치합니다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

npm i -D flowbite-svelte flowbite

 

4. src 폴더 안의 app.css 파일에서 아래의 코드로 변경합니다.

@tailwind base;
@tailwind components;
@tailwind utilities;
 
/* @layer base {
    * { --tw-ring-color: rgb(0 0 0 / 0)!important; } 
} */

 

5. tailwind.config.js 파일에서 아래의 코드로 변경합니다.

export default {
  content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'],
  plugins: [require('flowbite/plugin')],
  darkMode: 'selector',
  theme: {
    extend: {
      colors: {
        // flowbite-svelte
        primary: {
          50: '#FFF5F2',
          100: '#FFF1EE',
          200: '#FFE4DE',
          300: '#FFD5CC',
          400: '#FFBCAD',
          500: '#FE795D',
          600: '#EF562F',
          700: '#EB4F27',
          800: '#CC4522',
          900: '#A5371B'
        }
      }
    }
  }
};

 

6. flowbite-svelte 사이트에 접속합니다.

https://flowbite-svelte.com/docs/components/accordion

Svelte Accordion - Flowbite

 

6-1. flowbite-svelte 사이트에서 사용하고자 하는 컴포넌트 코드를 복사하여 프로젝트에 붙여넣기(적용)하면 됩니다.