Nuxt에서 Tailwind CSS 및 찾기 테이블을 사용하는 동적 구성 요소 스타일

This article will assume some knowledge of Nuxt / Vue

순풍, Nuxt 및 PurgeCSS
순풍 CSS는 현재 프런트엔드 개발에서 가장 핫한 화제 중의 하나다.Adam Wathan이 만든 유틸리티 우선 CSS 프레임워크는 지난 몇 년 동안 보조 프로젝트에서 성공적인 업무로 발전해 왔다.Tailwind를 사용한 적이 있다면, 구축할 때 PurgeCSS를 이용하여 사용하지 않은 스타일을 편집하고 웹 프로그램에서 사용하는 클래스로만 구성된 간소화 스타일시트를 만들 수 있습니다.많은 프레임워크들이 현재 PurgeCSS를 이용하여 구축할 때 생산 스타일시트에서 불필요한 대량을 삭제하고 있으며, Nuxt에서도 사용할 수 있습니다.Nuxt에서 새 프로젝트를 만들고 Tailwind 프리셋을 선택하면 PurgeCSS는 nuxt-purgecss 구축 모듈을 사용하는 모든 프로젝트에서 사용할 수 있지만 자동으로 설치됩니다.
PurgeCSS는 훌륭한 플러그인이지만, 자바스크립트를 해석하거나 실행할 수 없으며, 대부분의 경우 구축할 때만 사용됩니다.따라서 잘못 사용하면 개발 환경과 생산 환경 사이에 예상치 못한 불일치가 생길 수 있다.

Tailwind CSS를 사용하여 새 Nuxt 프로젝트를 시작합니다.
먼저 터미널을 열고 다음 명령을 실행하여 새 Nuxt 설치를 만듭니다.npx create-nuxt-app <your-project-name>UI 프레임에서 Tailwind CSS를 선택해야 하는 대신 간단히 기본 설정을 사용합니다.

Nuxt에서 순풍으로 동적 어셈블리 스타일
Nuxt(Vue)에서 구성 요소의 관건적인 기능 중 하나는 도구를 전달하는 능력이다.도구는 구성 요소에 전달되는 사용자 정의 속성으로 외관과 기능을 제어하는 데 사용됩니다.Tailwind를 사용하여 두 가지 색상을 수락하는 간단한 버튼 구성 요소를 만드는 방법을 살펴보겠습니다. "주요적"및 "부차적"

<template>
    <button 
        class="px-4 py-2 text-center transition-colors duration-300 ease-in-out border border-solid rounded shadow-md"
        :class="{ 
            'bg-blue-800 text-white border-blue-800 hover:bg-transparent hover:text-blue-800 hover:border-blue-800' : color == 'primary',
            'bg-transparent text-blue-800 border-blue-800 hover:bg-blue-800 hover:text-white hover:border-blue-800' : color == 'secondary'
        }"
    >
        <slot />
    </button>
</template>

<script>
    export default {
        name: 'component--button',

        props: {
            color: {
                required: false,
                type: String,
                default: 'primary',
                validator: value => {
                    return ['primary', 'secondary'].includes(value)
                }
            }
        }
    }
</script>

따라서 두 가지 동적 색상인 '주' 와 '차' 를 받아들일 수 있는 단추 구성 요소가 있습니다. 앞에서 설명한 바와 같이, 이 간단한 구성 요소에서도 이러한 동적 양식이 더욱 복잡한 구성 요소에서 어떻게 제어되지 않는지 쉽게 볼 수 있습니다.우리는 수동으로 템플릿의 동적 양식과 동기화해야 하는 색 도구 검증기가 하나 더 있습니다.

스타일을 추출하고 검증기와 검색표를 동기화합니다
만약 찾기표를 들어보지 못했다면, 찾기표는 간단한 키 값 대상입니다. 우리는 키와 데이터를 일치시킬 수 있습니다.우리는 검색표를 이용하여 동적 양식을 추출하고 검증기가 항상 동적 양식과 동기화되도록 확보할 수 있다.
이 예에서, 우리는 프로젝트의 루트 디렉터리에 validators이라는 새 폴더를 만들어서 찾기표를 저장할 것입니다. 그러나 원한다면, 같은 기술을 사용하여 구성 요소 파일에서 찾기표를 사용할 수도 있습니다.validators이라는 새 폴더를 만든 후 Button.js이라는 새 파일을 만듭니다.Button.js 내부에서 우리는 const이라는 ButtonColors을 내보낼 것이다. 이것은 동적 양식의 키 값 쌍을 포함하는 검색표이다. 아래와 같다.

export const ButtonColors = {
    'primary': 'bg-blue-800 text-white border-blue-800 hover:bg-transparent hover:text-blue-800 hover:border-blue-800',
    'secondary': 'bg-transparent text-blue-800 border-blue-800 hover:bg-blue-800 hover:text-white hover:border-blue-800'
}

현재, 우리는 동적 스타일을 검색표에 추출했습니다. 구성 요소를 변경해야 합니다. 우선, 시작 스크립트 표시줄 아래에서 ButtonColors const을 가져와야 합니다.

<script>
import { ButtonColors } from '~/validators/Button'

export default {/**/}
</script>

다음은 color 도구 검증기에서 ButtonColors 검색표의 키 그룹으로 이 그룹을 대체합니다.

/**/
validator: (value) => {
    return Object.keys(ButtonColors).includes(value)
},
/**/

이제 어셈블리 템플릿의 동적 클래스를 처리하는 계산 속성을 생성할 수 있습니다.

<script>
/**/
export default {
    /**/
    computed: {
        buttonColor() {
            return ButtonColors[this.color]
        },
    }
}
</script>

그런 다음 템플릿의 모든 동적 클래스를 새 계산 속성으로 대체할 수 있습니다.

<template>
    <button 
        class="px-4 py-2 text-center transition-colors duration-300 ease-in-out border border-solid rounded shadow-md"
        :class="[buttonColor]"
    >
        <slot />
    </button>
</template>

전반적으로 다음과 같은 구성 요소 템플릿을 제공합니다.

<template>
    <button 
        class="px-4 py-2 text-center transition-colors duration-300 ease-in-out border border-solid rounded shadow-md"
        :class="[buttonColor]"
    >
        <slot />
    </button>
</template>

<script>
    import { ButtonColors } from '~/validators/Button'

    export default {
        name: 'component--button',

        props: {
            color: {
                required: false,
                type: String,
                default: 'primary',
                validator: value => {
                    return Object.keys(ButtonColors).includes(value)
                }
            }
        },

        computed: {
            buttonColor() {
                return ButtonColors[this.color]
            },
        }
    }
</script>

모든 것이 좋아 보입니다. 우리의 동적 양식이 추출되고, 우리의 검증기는 자동으로 우리가 추가한 새로운 동적 양식과 동기화됩니다. 그러나 불행하게도, 현재 우리의 구성 요소는 생산 중인 예상에 따라 양식 설정을 할 수 없습니다.고맙게도 프로젝트의 루트 디렉터리에서 tailwind.config.js을 열고 purge 대상에서 content 그룹을 찾아 'validators/*.js'을 추가하면 PurgeCSS가validators 폴더에서 스타일을 검사할 수 있음을 알려줍니다. 우리의 최종 purge 대상은 다음과 같습니다.

purge: {
    // Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
    enabled: process.env.NODE_ENV === 'production',
    content: [
        'components/**/*.vue',
        'layouts/**/*.vue',
        'pages/**/*.vue',
        'plugins/**/*.js',
        'validators/*.js',
        'nuxt.config.js'
    ]
}

결론
Nuxt,Tailwind,PurgeCSS의 동적 클래스를 정리할 때 유용한 연습이 되기를 바랍니다.
이 문서가 유용하다고 생각되면 Medium, Dev.to 및/또는 저에게 전화하십시오.