스벨트에서 Tailwind css 설치 방법

1-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

스벨트 개발 환경 구축 방법

 

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

 

2. 실행된 윈도우 '명령 프롬프트'에서 아래의 명령어를 순차적으로 실행합니다.
(tailwindcss, postcss, autoprefixer 설치 및 tailwind.config.js, postcss.config.js 파일 생성 명령어)

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

 

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

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {}
  },
  plugins: []
};

 

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

@tailwind base;
@tailwind components;
@tailwind utilities;

 

5. App.svelte 파일에서 유틸리티 클래스(utility classes)를 작성해보면 Tailwind CSS가 적용되어지는 것을 확인할 수 있습니다.

---

- Tip -

※ Tailwind CSS에서 '사용자 정의 폰트'를 적용할 경우

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  @font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../font/NotoSans-Regular.woff2') format('woff2');
  }
  @font-face {
      font-family:'Noto Sans';
      font-style: bold;
      font-weight: 700;
      src: url('../font/NotoSans-Bold.woff2') format('woff2');
  }
  html {font-family: 'Noto Sans', system-ui, sans-serif; user-select: none;}
}