SvelteKit 프로젝트에서 TailWind CSS 설정

SvelteKit 프로젝트 내에서 TailWind CSS를 사용하여 최신 웹사이트를 빠르게 구축하십시오.

새 SvelteKit 프로젝트 설정 및 Tailwind 및 AutoPrefixer 설치

mkdir my-app
cd my-app
npm init svelte@next
npm install -D tailwindcss autoprefixer

프로젝트의 루트 디렉터리에 postcss.config.cjs 파일을 만듭니다.

SvelteKit은 기본적으로 postcss 지원과 함께 제공되는 Vite에 의해 번들로 제공됩니다.

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

TailWind 구성

프로젝트의 루트에 tailwind.config.cjs를 만듭니다. npx tailwind init를 실행할 수도 있지만 확장자의 이름을 .cjs로 변경해야 합니다.

module.exports = {
  mode: 'jit',
  content: ['./src/**/*.svelte'],
}

CSS 생성 및 가져오기

PostCSS가 tailwind 스타일을 삽입할 위치를 알고 있는 CSS의 어딘가에 이러한 태그를 추가하십시오. 이것을 가져오기에 좋은 위치는 스타일 태그 내부의 __layout.svelte입니다.

<style>
    ...
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
</style>

그게 다야! 이제 flex , pt-4 , text-center 및 rotate-90와 같은 TailWind CSS 클래스를 사용하여 마크업에서 직접 모든 디자인을 빌드하도록 구성할 수 있습니다.