Tailwind CSS 및 CSS-IN-JS로 React.js(CRA) 설정

프로젝트에서 스타일을 사용하는 방식을 개선하기 위해 단일 React 프로젝트에서 Tailwind CSS/Emotion 및 twin.macro를 설치하고 구성하는 방법을 설명하겠습니다.

프로젝트 설정

첫 번째 단계는 create-react-app 패키지를 사용하는 이 경우 React 프로젝트를 생성하거나 생성하는 것이므로 터미널 또는 CMD에서 다음 명령을 실행해야 합니다.

npx create-react-app react-with-tw

프로젝트 생성이 완료되면 폴더cd react-with-tw로 진입합니다.

종속성 설치

이제 필요한 모든 종속성을 설치해야 합니다. 프로젝트 내에서 터미널에서 다음 명령을 실행합니다.

npm i tailwindcss twin.macro @emotion/core @emotion/styled

tailwindcss는 Tailwind CSS의 모든 기능과 사용자 정의가 포함된 TailwindCSS 패키지입니다.

@emotion/core 및 @emotion/styled는 우리 프로젝트에서 JavaScript로 강력한 CSS를 작성하기 위한 라이브러리입니다.

twin.macro는 기본적으로 Tailwind 클래스를 CSS 개체로 변환하고 @emotion과 공유하여 Styled Components로 작성하는 능력을 제공합니다.

따라서 일단 설치되면 구성하고 사용을 시작할 수 있습니다.

Tailwind CSS의 구성 파일

이제 프로젝트에서 Tailwind CSS 구성을 시작합니다. 첫 번째 단계는 구성 파일을 생성한 다음 tailwind.css 파일을 생성하는 것입니다.

터미널에서 다음 명령을 작성하여 tailwind의 구성 파일을 생성합니다.

npx tailwindcss init --full

--full 플래그를 사용하여 우리가 원하는 전체 구성 파일이 tailwind에 알립니다.

출력은 다음 코드가 포함된 tailwind.config.js입니다.

// tailwind.config.js
module.exports = {
  purge: [],
  target: 'relaxed',
  prefix: '',
  important: false,
  separator: ':',
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
...

이 파일에서 tailwind에 대한 모든 것을 사용자 정의할 수 있습니다(중단점, 색상, 여백 및 패딩).

이 파일은 루트 폴더에 자동으로 생성되지만/src 폴더로 이동해야 합니다.

사용자 지정 구성 위치 구성

이 단계에서는 tailwind.config.js 파일의 경로를 구성해야 하므로 package.json에 다음 코드를 넣어야 합니다.

// package.json
"babelMacros": {
  "twin": {
    "config": "src/tailwind.config.js"
  }
},

다른 경로가 있는 경우 구성 행을 변경하십시오.

프로젝트에서 Tailwind CSS 가져오기

여기서 TailwindCSS가 node_module 패키지에서 사용할 수 있는 base.min.css 파일을 가져와야 합니다. index.js 또는 진입점 파일에 다음 코드를 넣어 tailwind 스타일을 가져옵니다.

import 'tailwindcss/dist/base.min.css';

어떤 이유로든 사용자 정의 tailwind.css 파일이 있는 경우 base.min.css를 고유한 파일로 바꿀 수 있습니다.

twin.macro 사용

이제 tailwind/@emotion 및 twin.macro의 모든 기능을 사용할 수 있습니다. 여기에서 몇 가지 예를 볼 수 있습니다.

소품을 JSX 요소에 전달

/** @jsx jsx */ import { jsx } from '@emotion/core'
import tw from 'twin.macro';

const MyComponent = () => {

    return (
        <h1 tw="text-blue-500 text-2xl" >Hello world</h1>
    )
}

export default MyComponent;

스타일이 지정된 구성 요소 만들기

import tw from 'twin.macro';

// Styled Components
const MyHeading = tw.h1`text-blue-500 text-2xl`; 

const MyComponent = () => {

    return (
        <MyHeading>Hello World</MyHeading>
    )
}

export default MyComponent;

기존 스타일 구성요소 복제

import tw from 'twin.macro';

// Styled Components
const MyButton = tw.button`border-2 px-4 py-2`
const MyPrimaryButton = tw(MyButton)`border-blue-500 bg-blue-500`; 

const MyComponent = () => {

    return (
        <MyPrimaryButton>My Button</MyPrimaryButton> 
    )
}

export default MyComponent;

소품 및 조건부 스타일 전달

import tw, { styled } from 'twin.macro';

// Styled Components
const MyButton = tw.button`border-2 px-4 py-2`
const MyPrimaryButton = tw(MyButton)`border-blue-500 bg-blue-500`; 
const MyPrimaryButtonCustomizable = styled(MyPrimaryButton)(({isUppercase}) => [
    tw`mx-2`,
    isUppercase && tw`uppercase`
]);

const MyComponent = () => {

    return (
        <MyPrimaryButtonCustomizable isUppercase>My Button</MyPrimaryButtonCustomizable> 
    )
}

export default MyComponent;

글쎄, 우리 프로젝트에는 TailwindCSS를 더 많이 사용하기 위해 twin.macro가 있습니다. 추가하거나 수정할 사항이 있으면 언제든지 댓글로 알려주십시오.

사용할 준비가 된 모든 저장소: cra-template-tailwindcss-styled