React 테일원드 + Module.css 사용법

1. module.css

.test {
    @apply bg-blue-500 text-white text-2xl;
}

 

2. .jsx 파일

- import styles로 사용할 모듈을 가져옵니다.

-  className={`${styles.test}`}> 방식을 통해서 필요한 className를 가져옵니다.

import React from 'react'
import styles from './Test01.module.css';
const Test01 = () => {
    return (
        <div>
            <div className={`${styles.test}`}>
                Test01
            </div>
        </div>
    )
}

export default Test01

 

 

3. 2개 이상 스타일 요소를 가져오고 싶다면?

- ${styles.className}로 새로운 className를 적습니다.

<div className={`${styles.test} ${styles.test_box}`}>
 Test01
</div>