[React] Tailwind 사용하기 (3) - 커스텀(Custom) 하기

안녕하세요. J4J입니다.

 

이번 포스팅은 tailwind 사용하기 마지막인 커스텀하는 방법에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

이전 글

 

[React] Tailwind 사용하기 (1) - 개념 및 설정

[React] Tailwind 사용하기 (2) - StyledComponents와 CSS 적용 비교하기

 

 

반응형

 

 

Theme 커스텀

 

theme 커스텀은 기본적으로 tailwind에서 제공해 주는 theme을 사용자의 스타일에 맞게 재 정의하는 것으로 tailwind.config.js에서 적용할 수 있습니다.

 

색상, 글자 크기, 너비 등 tailwind를 이용하여 적용하고 싶은 css 들을 원하는 데로 추가해 줄 수 있으며 다음과 같이 설정하여 적용해 볼 수 있습니다.

 

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./src/**/*.{js,ts,jsx,tsx}'],
    theme: {
        colors: {
            myColor: {
                100: '#a3a3a3',
            },
        },
        fontSize: {
            mySize: '3rem',
        },
        width: {
            myWidth: '15rem',
        },
        screens: {
            myScreen: '999px',
        },
    },
    plugins: [],
};

// app.tsx

import React from 'react';

const App = () => {
    return (
        <div>
            {/* tailwind 제공 utility */}
            <p className="text-blue-500">tailwind 제공 utility</p>

            {/* tailwind theme custom */}
            <p className="text-myColor-100">사용자 추가 색상</p>
            <p className="text-mySize">사용자 추가 글자 크기</p>
            <p className="w-myWidth">사용자 추가 너비</p>
            <p className="myScreen:font-bold">사용자 추가 반응형 스크린 크기</p>
        </div>
    );
};

export default App;

 

 

 

위와 같이 설정했을 때 문제점이 하나 발생됩니다.

 

발생되는 문제점은 커스텀한 theme들에 한하여 tailwind에서 기본적으로 제공해주던 css들이 적용이 되지 않는 것입니다.

 

즉, 다음 코드 같은 경우는 theme colors를 커스텀했기 때문에 tailwind에서 제공해주던 color와 관련된 어떠한 css도 적용되지 않는 상황이 발생됩니다.

 

{/* tailwind 제공 utility */}
<p className="text-blue-500">tailwind 제공 utility</p>

 

 

 

만약 tailwind에서 제공해주던 css들을 그대로 사용하면서 사용자가 원하는 css를 추가하고 싶다면 theme 아래에 값들을 바로 추가하는 것이 아니라 다음과 같이 theme > extend 아래에 정의를 해줘야 합니다.

 

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./src/**/*.{js,ts,jsx,tsx}'],
    theme: {
        extend: {
            colors: {
                myColor: {
                    100: '#a3a3a3',
                },
            },
            fontSize: {
                mySize: '3rem',
            },
            width: {
                myWidth: '15rem',
            },
            screens: {
                myScreen: '999px',
            },
        },
    },
    plugins: [],
};


// app.tsx

import React from 'react';

const App = () => {
    return (
        <div>
            {/* tailwind 제공 utility */}
            <p className="text-blue-500">tailwind 제공 utility</p>

            {/* tailwind theme custom */}
            <p className="text-myColor-100">사용자 추가 색상</p>
            <p className="text-mySize">사용자 추가 글자 크기</p>
            <p className="w-myWidth">사용자 추가 너비</p>
            <p className="myScreen:font-bold">사용자 추가 반응형 스크린 크기</p>
        </div>
    );
};

export default App;

 

 

 

위와 같이 설정을 하면 아래 코드도 올바르게 css가 적용되는 것을 확인할 수 있습니다.

 

{/* tailwind 제공 utility */}
<p className="text-blue-500">tailwind 제공 utility</p>

 

 

 

여기서 한 가지 더 알고 가셔야 될 점은 extend 아래에 원하는 css를 정의했더라도 기존에 tailwind에서 제공해주고 있던 이름으로 정의를 하면 오버라이딩이 됩니다.

 

즉, tailwind에서 제공해 주는 것이 사용되지 않고 사용자가 커스텀한 값들로 변경 적용되는 것을 의미합니다.

 

 

 

 

Base Style 커스텀

 

base style 커스텀은 html에서 제공해주는 요소들에 대해 기본적으로 적용하는 css를 의미합니다.

 

해당 설정은 main.css 또는 global.css 등으로 사용되는 파일에 정의해 줄 수 있으며 tailwind 사용 환경을 설정하신 분들은 다음과 같이 이미 해당 파일이 생성되어 있을 겁니다.

 

// main.css

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

 

 

 

적용하는 방법은 다음과 같이 해볼 수 있습니다.

 

// main.css

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

/* adding base style */
@layer base {
    p {
        /* 모든 p에 font-family: font-serif, box-sizing: border-box, margin: 0, padding: 0 적용 */
        @apply font-serif box-border m-0 p-0;
    }

    div {
        /* 모든 div에 box-sizing: border-box, margin: 0, padding: 0 적용 */
        @apply box-border m-0 p-0;
    }
}

 

 

 

 

Components Classes 커스텀

 

components classes는 utility별 스타일을 적용하는 것이 아닌 일반적인 css 적용을 위해 class 별로 style을 적용하는 것처럼 component별 style을 정의하여 사용될 때 활용합니다.

 

components classes도 base style처럼 main.css 또는 global.css 등에 설정해 줄 수 있으며 다음과 같이 적용하여 사용해볼 수 있습니다.

 

// main.css

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

/* adding components classes */
@layer components {
    .modal--outer {
        /* 일반 css 사용 */
        display: flex;
        justify-content: center;
        align-items: center; 
        background-color: #a9a9a9;

        /* tailwind theme 사용 - 1 */
        height: theme('height.60');

        /* tailwind theme 사용 - 2 */
        @apply rounded-lg;
    }

    .modal--inner {
        /* 일반 css 사용 */
        background-color: #ffffff;
        text-align: center;
        width: 12.5rem;
    }
}

// app.tsx

import React from 'react';

const App = () => {
    return (
        <div>
            {/* tailwind components custom */}
            <div className="modal--outer">
                <div className="modal--inner">컴포넌트 스타일 추가</div>
            </div>
        </div>
    );
};

export default App;

 

 

 

 

Utilities 커스텀

 

utilities는 사용하고자 하는 커스텀 utility를 추가할 때 활용됩니다.

 

utilities도 위와 동일하게 main.css 또는 global.css 등에 설정해줄 수 있으며 다음과 같이 적용해 볼 수 있습니다.

 

// main.css

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

/* adding utilities */
@layer utilities {
    .my-utility-color-1 {
        background-color: olive;
    }

    .my-utility-color-2 {
        background-color: aqua;
    }
}

// app.tsx

import React from 'react';

const App = () => {
    return (
        <div>
            {/* tailwind utility custom */}
            <p className="my-utility-color-1">유틸리티 스타일 색상 추가</p>
            <p className="my-utility-color-2">유틸리티 스타일 색상 추가</p>
        </div>
    );
};

export default App;

 

 

 

여기서 한 가지 의문점은 utilities를 여러 가지 활용해 보면서 components와 어떤 차이점이 있는지가 궁금했었습니다.

 

공식 문서를 확인해 봐도 둘에 대한 차이점이 소개된 것도 보이지 않았고 실제로 여러 가지 테스트를 했을 때 다음과 같이 components와 utilities에 설정한 것을 반대로 해도 사용되는데 문제점은 없었습니다.

 

// main.css

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

/* adding components classes */
@layer components {
    .my-utility-color-1 {
        background-color: olive;
    }

    .my-utility-color-2 {
        background-color: aqua;
    }
}

/* adding utilities */
@layer utilities {
    .modal--outer {
        /* 일반 css 사용 */
        display: flex;
        justify-content: center;
        align-items: center; 
        background-color: #a9a9a9;

        /* tailwind theme 사용 - 1 */
        height: theme('height.60');

        /* tailwind theme 사용 - 2 */
        @apply rounded-lg;
    }

    .modal--inner {
        /* 일반 css 사용 */
        background-color: #ffffff;
        text-align: center;
        width: 12.5rem;
    }
}

 

 

 

그나마 확인된 사항 중 하나는 components에 정의된 것들은 utilities를 통해 오버라이딩이 될 수 있다는 것입니다.

 

예를 들면 다음과 같이 components에 정의한 class를 utilities에 추가 정의를 할 경우 components에 정의한 속성 값은 오버라이딩 되어 적용되지 않습니다.

 

// main.css

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

/* adding components classes */
@layer components {
    .modal--outer {
        /* 일반 css 사용 */
        display: flex;
        justify-content: center;
        align-items: center; 
        background-color: #a9a9a9;

        /* tailwind theme 사용 - 1 */
        height: theme('height.60');

        /* tailwind theme 사용 - 2 */
        @apply rounded-lg;
    }

    .modal--inner {
        /* 일반 css 사용 */
        background-color: #ffffff;
        text-align: center;
        width: 12.5rem;
    }
}

/* adding utilities */
@layer utilities {
    .modal--inner {
        @apply bg-cyan-300;
    }
}

// app.tsx

import React from 'react';

const App = () => {
    return (
        <div>
            {/* tailwind components custom */}
            <div className="modal--outer">
            	{/* 적용 css : background-color: cyan-300; text-align: center; width: 12.5rem; */}
                <div className="modal--inner">컴포넌트 스타일 추가</div>
            </div>
        </div>
    );
};

export default App;

 

 

 

 

 

 

 

 

이상으로 tailwind 사용하기 마지막인 커스텀하는 방법에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.