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

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

확인하셨습니다.

I would say please read part one if you haven't, it's a continuation.

소개
마지막 부분에서 우리는 디자인 시스템, tailwindcss, sveltekit이 무엇인지 배웠습니다. 우리는 또한 sveltekit에 tailwind css를 추가한 프로젝트를 만들었습니다. 그것은 우리가 마지막 부분에서 한 것입니다. 이 부분에서는 tailwind.config.cjs 파일을 변경하여 색상, 화면 크기, 간격 등을 정의할 것입니다.

순풍 구성 알아보기
여기에서 tailwind 구성 파일을 편집합니다. Tailwind는 즉시 사용 가능한 디자인 시스템 수준 구성을 제공합니다.

먼저 구성 파일로 무엇을 할 수 있는지 설명하겠습니다.

content : 프로젝트에 tailwind css를 추가하기 위해 tailwind 컴파일러에서 처리할 파일을 전달하는 배열 유형 개체입니다.

theme : 사이트의 시각적 디자인과 관련된 색상 팔레트, 글꼴, 문자 배율, 테두리 크기, 중단점 등을 정의하는 사전 유형 객체입니다.

플러그인: 배열 유형 객체이며, 이를 통해 추가 유틸리티, 구성 요소, 기본 스타일 또는 사용자 정의 변형을 생성하는 데 사용할 수 있는 플러그인을 Tailwind에 등록할 수 있습니다.

corePlugins: 프로젝트에 필요하지 않은 경우 일반적으로 Tailwind에서 기본적으로 생성하는 클래스를 완전히 비활성화하는 사전 유형 개체입니다.

나에 따르면 이들은 대부분 구성 파일에서 재생해야 하는 주요 매개 변수입니다. 구성에 대해 자세히 알아보려면click here .

순풍 구성 설정
우리 프로젝트에서는 디자인 시스템에서 가장 중요한 theme 섹션에 집중할 것입니다.

theme 섹션에는 두 가지 옵션이 있습니다.

tailwind css의 기본 구성 확장: 속성을 추가할 수 있고 tailwind 속성도 가질 수 있음을 의미합니다.

theme: {
    extend: {
        colors: {
            'additional-color-name':'value',
        }
    }

기본값 교체: 즉, 모든 등록 정보에 대한 모든 제어 권한이 있음을 의미합니다. Tailwind 기본값은 제공된 값으로 대체됩니다.

theme: {
    colors: {
        'color':'value',
    }
}

This will replace the default colors.
If you wanna learn more about tailwind theme configuration click here

• We need our design system, so we gonna replace default with our values. Here, I'm going with my own colors.

따라서 테마의 순풍 구성에 이 구성을 추가하겠습니다.

const colors = require('tailwindcss/colors.js');

theme: {
        colors: {
            gray: colors.gray,
            black: colors.black,
            white: colors.white,
            danger: colors.rose,
            info: colors.sky,
            warning: colors.amber,
            success: colors.teal,
            primary: colors.orange,
            secondary: colors.violet,
            tertiary: colors.rose
        }
    }

여기에서 저는 제가 정의한 이름과 함께 순풍 색상을 사용하기로 결정했습니다. 아니면 순풍 음영 생성기를 사용하고 색상 구성을 제공할 수 있습니다.

디자인 시스템의 색상을 추가하기만 하면 됩니다. 화면과 간격도 마찬가지입니다.

사용 방법?
마지막 부분에서 결국 우리는 다음 코드를 가졌습니다.

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

지난 번에 색상 속성을 지정하지 않았지만 문제 없이 기본 또는 사용자 지정에서 지정할 수 있습니다.

이제 디자인 시스템을 사용할 때 다음과 같이 할 수 있습니다.

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

이렇게 하면 구성에서 제공한 해당 텍스트의 색상에 대한 추가 스타일이 생성됩니다.

두 부분으로 구성된 이 시리즈의 끝입니다.
끝까지 읽어주셔서 감사합니다.

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