SvelteKit에서 TailwindCSS를 사용하여 디자인 시스템 만들기: 1부

다음과 같은 경우에 읽으십시오:

SvelteKit에서 TailwindCSS를 설정하는 방법을 배우고 싶습니다.

디자인 시스템의 기본 사항을 이해하고 싶습니다.

TailwindCSS를 사용하여 디자인 시스템을 만드는 방법을 배우고 싶습니다.

소개

어느날 기사What is the need of having a design system를 읽고 있었습니다. 그들은 기사에서 주목해야 할 몇 가지 중요한 점을 언급했습니다.

예 :

Bootstrap 또는 Material과 같은 프레임워크는 초보자를 위해 조정하기가 그리 쉽지 않습니다.

사용자를 위한 좋은 UX를 만들려면 단순하고 아름다운 디자인이 필요하지만 모든 디자인 시스템은 기본적으로 아름다움을 제공하지만 단순하지는 않기 때문에 디자인 시스템은 비즈니스에 매우 중요합니다.

디자인 시스템이란 무엇입니까?
디자인 시스템은 명확한 표준에 따라 재사용 가능한 구성 요소의 모음으로, 함께 조립하여 여러 응용 프로그램을 구축할 수 있습니다.

If you are looking for Open Sourced Design Systems Click Here. This contains all big projects.

Tailwind CSS란 무엇인가요?
Tailwind CSS는 기본적으로 사용자 지정 사용자 인터페이스를 신속하게 구축하기 위한 유틸리티 우선 CSS 프레임워크입니다. 무시하기 위해 싸워야 하는 성가신 독단적인 스타일 없이 맞춤형 디자인을 구축하는 데 필요한 모든 빌딩 블록을 제공하는 고도로 사용자 정의 가능한 저수준 CSS 프레임워크입니다.

If you are looking to use TailwindCSS Without SvelteKit, Visit TailwindCSS Docs. They explain everything in detail.

SvelteKit이란 무엇입니까?
SvelteKit은 Svelte(구성 요소 프레임워크) 위에 구축된 앱 프레임워크(또는 '메타프레임워크')입니다. 그 역할은 서버 측 렌더링(SSR) 및 코드 분할과 같은 모든 최신 모범 사례를 사용하여 Svelte 앱을 쉽게 구축할 수 있도록 하는 것입니다.

Wanna learn more about SvelteKit? Visit SvelteKit Docs

SvelteKit 데모 템플릿 시작하기

먼저 터미널을 열고 npm init svelte@next를 실행합니다.

npm init svelte@next my-project

my-project is the name you wanna give to your project in your system

위의 명령 터미널을 실행하면 prettier , typescript support 등과 관련된 질문이 표시되며 필요에 따라 선택하십시오.

위 단계에서 시스템에 my-project라는 이름으로 dir을 만들었습니다. 이제 프로젝트 디렉토리를 얻었고 npm은 모든 종속성을 설치합니다.

cd my-project && npm i

This command is going to install your all dependencies for the project. Now run your SvelteKit project to live dev server using

npm run dev

How do i know what will npm run dev will do? For that in your project root directory find a file package.json and in this file there is a Dictionary by name of scripts. Read it and if you have any trouble ask in comment or google it.

브라우저에서 데모 앱으로 설정하면 다음과 같이 표시됩니다.

이렇게 하면 SvelteKit 설정이 수행됩니다. 이제 이 프로젝트에서 Tailwind CSS를 설정하는 방법을 살펴보겠습니다.

SvelteKit 프로젝트에서 Tailwind CSS 설정

먼저 터미널을 열고 터미널을 사용하여 프로젝트 디렉토리로 이동한 후 다음을 실행합니다.

npm install -D tailwindcss postcss autoprefixer svelte-preprocess

This will install TailwindCSS, PostCSS, AutoPrefixer and Svelte Preprocess. For more about them please google.

둘째, 이 명령을 실행하여 프로젝트에서 tailwind 구성 파일을 초기화합니다.

npx tailwindcss init tailwind.config.cjs -p

세 번째로 svelte 구성 파일에서 svelte 전처리를 가져오고 다음 행을 추가합니다.

import preprocess from 'svelte-preprocess';

그리고 이것을 svelte 구성 파일의 구성 사전에 추가합니다.

preprocess: [
        preprocess({
            postcss: true
        })
    ],

Like this :

넷째, Tailwind CSS에 tailwind 클래스를 사용할 파일을 찾도록 지시합니다. module.exports 사전의 tailwind 구성 파일에 이 줄을 추가합니다.

  content: ['./src/**/*.{html,js,svelte,ts}'],

Like this

다섯째, src라는 이름의 새 파일을 app.css에 추가하고 (이름 지정 규칙) 다음 줄을 app.css에 추가합니다.

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

여섯째, src/routes라는 새 파일을 __layout.svelte(명명 규칙 아님)에 추가하고 layout.svelte에 다음 코드 줄을 추가합니다.

<script>
  import "../app.css";
</script>

<slot />

개발 서버가 실행 중일 때 제목 크기에 약간의 변화가 있을 수 있으며 제대로 작동하는지 확인하려면 src/routes/index.svelte 파일에 다음 코드 줄을 추가하십시오.

<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>

On dev serve you will find it. For more, how tailwind classes work => use tailwind docs.

이것이 첫 번째 부분의 끝입니다.




이 시리즈의 두 번째 부분을 읽으려면 .

이것은 내가 당신을 위해 쓰는 것입니다. 묻고 싶은 것이나 제안하고 싶은 것이 있다면 댓글에 적어주세요.