Tailwind JIT를 사용한 임의 스타일

This article was first posted on devjavu.space

Tailwind은 개발자가 웹 구성 요소의 스타일링을 완전히 제어할 수 있는 유틸리티 우선 CSS 프레임워크입니다. 구성 요소 프레임워크나 라이브러리와 달리 Tailwind는 소품 및 옵션을 통해 조정할 수 있는 기존 구성 요소로 제한하지 않습니다. Tailwind를 사용하면 가장 작은 형태의 유틸리티 클래스를 사용하여 처음부터 빌드합니다.

Sheesh! But I’d rather have someone else do the job, I like component libraries better. Well, there’s Headless UI — completely unstyled UI components that integrates well with Tailwind CSS (their words, not mine).

Tailwind의 Tailwind JIT 중 하나가 발표되면서 Tailwind가 더욱 좋아졌습니다. 이 기능을 실제로 사용하는 방법을 살펴보겠습니다.


Tailwind를 사용하면 일반적으로 tailwind.config.js 파일 내에서 테마와 변형을 설정하는 것으로 시작합니다. 이 같은:

module.exports = {
  theme: {
    colors: {
      gray: '#CFD8DC',
      blue: '#2196F3',
      red: '#EF5350',
      pink: '#F48FB1',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
  variants: {
    extend: {
      borderColor: ['focus-visible'],
      opacity: ['disabled'],
    }
  }
}

theme 섹션은 사이트의 시각적 디자인/디자인 시스템과 관련된 모든 것을 사용자 지정하는 곳입니다. 여기에서 색상 팔레트, 글꼴 모음, 테두리 반경 크기 등을 지정할 수 있습니다. 사용자 지정 없이 Tailwind는 예를 들어 colours과 같이 이러한 모든 스타일 속성에 대한 특정 값을 제공합니다.



이 차트를 보면 "빨간색"의 10가지 음영을 사용자 정의할 수 있다는 것을 알지만 문제는 하나 또는 두 개의 추가 음영을 말해야 할 때 발생합니다(만족할 수 없는 인간, 그렇죠?). 물론 Tailwind의 구성 파일은 이를 달성하는 데 도움이 될 수 있습니다.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        red: {
          350: '#E53935'
        },
      }
    }
  }
}

응용 프로그램의 한 두 부분에만 이러한 음영이 필요하고 테마 지정에 필요하지 않은 경우에는 이 작업을 수행할 필요가 없습니다. 여기에서 Tailwind JIT 컴파일러가 포함된 Arbitrary Styles가 등장합니다. Arbitrary Styles를 사용하면 구성 파일에서 업데이트할 필요 없이 요소에 필요한 초특정 스타일을 지정할 수 있습니다. 예, Sam, 이제 이러한 인라인 스타일을 제거할 수 있습니다. 스타일 속성 👀.

이것을 시험해 봅시다. Vue 프로젝트를 시작하고 Tailwind를 설치한 다음 JIT 모드를 설정합니다. 작업하는 모든 Javascript 프런트엔드 프레임워크에서 이 작업을 수행할 수 있습니다. Tailwind는 프레임워크에 구애받지 않습니다.

Psst! Here’s a Vue and no-framework setup for Tailwind:

vue create tailwind-ab-styles

프로젝트 디렉터리로 이동합니다.

cd tailwind-ab-styles

Tailwind CSS를 설치하고 설정합니다. 다음은 Vue 프로젝트에서 Tailwind CSS를 설정하는 빠른 가이드입니다.

Vue 3에서 Tailwind CSS를 설정하는 방법 | DevjavuVue 3에서 Tailwind CSS를 설정하는 방법 | 데브자부

문서를 너무 싫어하는 경우 간소화된 연습입니다.



devjavu.space




Tailwind를 설정한 후 tailwind.config.js를 업데이트하고 "mode"속성을 "JIT"로 변경하여 JIT를 활성화할 수 있습니다.

module.exports = {
  mode: 'jit',  // update this line
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  ...
};

Vue 서버를 가동하고 이것이 어떻게 보이는지 봅시다.

yarn serve

서버를 시작할 때 현재 미리 보기에 있는 JIT 엔진에 대해 번들러에서 비슷한 경고를 받을 수 있습니다.

임의의 스타일 사용

App.vue 파일을 기본 Tailwind 클래스가 포함된 간단한 마크업으로 업데이트했습니다.

<template>
  <div class="justify-center flex bg-yellow-300 items-center h-screen">
    <div class="text-4xl">
      Hello 👋🏼
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

결과:



알림 위의 마크업에는 "text-4l"클래스의 div가 둘러싸는 텍스트 "Hello"가 있습니다. Tailwind는 사용할 수 있는 10개의 "글꼴 크기"유틸리티 클래스를 제공하며 해당 값의 범위는 0.75rem ~ 8rem 입니다. 이 텍스트의 크기가 9rem이기를 원한다고 가정해 보겠습니다. 임의의 스타일을 사용하여 이 경우에 다른 유틸리티 클래스를 구성할 필요가 없습니다. 대신 다음을 수행합니다.

<div class="text-[9rem]">
  Hello 👋🏼
</div>

그리고 9rem 크기의 거대한 텍스트가 있습니다. 이렇게 하면 인라인 스타일로 마크업을 어지럽히는 수고를 덜 수 있습니다.



"hello"텍스트 아래에 상자를 추가하고 임의 값을 사용하여 너비, 높이 및 배경색을 설정해 보겠습니다.

<div class="w-[300px] h-[200px] bg-[#FFECB3] rounded-[20px] ml-[40px]"></div>

화면 변형에도 사용할 수 있습니다.

<div class="w-[300px] h-[200px] md:bg-[#FFECB3] rounded-[20px] ml-[40px] lg:ml-[-400px] lg:mb-[430px]"></div>

이는 그리드 및 레이아웃에서도 작동합니다. 고급 응용 프로그램에 대해서는 documentation을 확인하십시오.

한정

At the time of writing, you can only @apply classes that are part of core, generated by plugins, or defined within a @layer rule. You can’t @apply arbitrary CSS classes that aren’t defined within a @layer rule. — docs

@apply는 기존 유틸리티 클래스를 사용자 지정 CSS에 인라인하는 데 사용되는 지시어입니다. 현재 이것은 임의 값에 대해 알려진 유일한 제한 사항입니다. 재미있게 땜질하십시오.


건배 ☕️