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

안녕하세요. J4J입니다.

 

이번 포스팅은 tailwind 사용하기 중 첫 번째인 개념 및 설정에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

Tailwind란?

 

tailwind는 유틸리티 우선(Utility-First) css 프레임워크로 불립니다.

 

여기서 말하는 유틸리티 클래스는 버튼, 모달 등과 같이 주변을 구성하기 위한 css가 아닌 빨간색 글자 색상, xl 사이즈의 글자 크기 등과 같이 하나의 css에 정의된 속성과 값을 가지는 걸 의미합니다.

 

즉, 유틸리티 우선이라고 하는 것은 bootstrap처럼 기존에 정의된 값을 가져와 사용하는 것이 아닌 사용자가 원하는 데로 각각의 속성값을 적용하는 방식이라고 말할 수 있습니다.

 

// css
.container {
    border: 2px solid black;
    background-color: #3B82F6;
    height: 2.5rem;
}

<main>
	<div className=".container" />
</main>


// tailwind
<main>
	<div className="border-2 border-solid border-black bg-blue-500 h-10" />
</main>

 

 

반응형

 

 

특징

 

[ 장점 ]

 

tailwind의 장점은 여러 가지가 있지만 그 중 개인적으로 가장 크게 보고 있는 장점은 2가지가 있습니다.

 

첫 번째는 bundle 사이즈가 작습니다.

 

tailwind를 사용해보거나 또는 위에 코드를 확인해 보시면 알겠지만 css를 적용하기 위해 .css, .scss 파일이나 css-in-js를 위한 컴포넌트들을 추가적으로 만들어 줄 필요가 없습니다.

 

또한 동일한 스타일을 서로 다른 컴포넌트에 적용할 때 해당 스타일을 적용하기 위한 소스가 모두 재사용되기 때문에 bundle 사이즈가 작아지는데 더 도움을 줍니다.

 

 

 

두 번째는 css 사용을 위한 네이밍을 하지 않아도 됩니다.

 

코드를 작성할 때 특정 기능에 대한 네이밍을 하는 것은 누구나 다 겪어보셨을 겁니다.

 

일반적으로 네이밍을 대충 하지 않고 다음에 봤을 때도 알아볼 수 있도록 직관적인 네이밍을 짓기 위해 노력을 할텐데 해당 노력은 생각하는 것보다 많은 시간을 소비하게 만듭니다.

 

또한 개발할 때 협업하는 것이 거의 필수적인데 팀원들 간 네이밍을 어떻게 구성할지에 대해 컨벤션을 정하게 만들 수 있습니다.

 

tailwind는 이런 문제점들을 겪지 않도록 도와줍니다.

 

특별한 네이밍 없이 class에 원하는 스타일을 입혀 빠른 속도로 개발할 수 있게 도움을 줍니다.

 

 

 

[ 단점 ]

 

다른 기술들과 마찬가지로 tailwind에도 단점이 존재하며 그 중 개인적으로 가장 크게 보고 있는 단점은 2가지가 있습니다.

 

첫 번째는 html 코드가 장황하고 복잡하다고 느껴집니다.

 

모든 요소에 대해 스타일을 적용하기 위해서는 class에 원하는 값들을 지속적으로 넣어줘야 합니다.

 

그러다 보니 10개 이상의 스타일만 적용하더라도 점점 어지러워지기 시작하며 코드를 읽는데 좋은 경험을 만들지는 못한다고 생각합니다.

 

 

 

두 번째는 어떤 목적을 위한 코드인지 구분하는데 어려워집니다.

 

해당 단점은 장점 중 하나였던 네이밍을 하지 않는 것에 의해 발생되는 것이라고 생각합니다.

 

네이밍을 하지 않고 원하는 스타일을 즉각적으로 적용하기 때문에 개발 속도를 분명히 빨라질 것이라고 생각합니다.

 

하지만 개발된 소스를 수정하기 위해 다시 코드를 살펴봐야 할 때 명확한 네이밍이 되어 있지 않기 때문에 소스를 조금 더 세밀하게 분석해야 될 것이라고 생각합니다.

 

그래도 주석을 잘 활용하면 해당 단점은 크게 느껴지지 않을 부분이라고 여겨집니다.

 

 

 

 

Tailwind 설정

 

이번엔 tailwind를 사용할 수 있도록 설정을 해보겠습니다.

 

 

 

[ 1. 패키지 설치 ]

 

$ npm install -D tailwindcss postcss autoprefixer style-loader css-loader postcss-loader

 

 

 

[ 2. webpack 설정 ]

 

module.exports = {
    // 로더 등록
    module: {
        rules: [
            {
                test: /\.css?$/,
                use: ['style-loader', 'css-loader', 'postcss-loader'],
                exclude: ['/node_modules/'],
            },
        ],
    },
};

 

 

 

[ 3. tailwind 초기화 ]

 

$ npx tailwindcss init

 

 

 

명령어를 입력하면 tailwind 설정 파일인 tailwind.config.js 파일이 생성되는 것을 확인할 수 있습니다.

 

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [],
    theme: {
        extend: {},
    },
    plugins: [],
};

 

 

 

[ 4. content 설정 ]

 

생성된 tailwind.config.js 파일을 보면 content 라는 설정 값이 있습니다.

 

content에는 tailwind를 적용할 파일 경로를 넣어주면 되고 일반적으로 다음과 같이 넣어주면 모든 파일에 적용이 됩니다.

 

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./src/**/*.{js,ts,jsx,tsx}'],
    theme: {
        extend: {},
    },
    plugins: [],
};

 

 

 

[ 5. postcss 설정 ]

 

root 경로에 postcss.config.js 파일을 생성한 뒤 다음과 같이 코드를 작성하시면 됩니다.

 

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

 

 

 

[ 6. main.css 설정 ]

 

/src 경로에 main.css 파일을 생성한 뒤 다음과 같이 코드를 작성하여 tailwind 지시문을 추가하시면 됩니다.

 

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

 

 

 

그리고 해당 파일을 index 파일 등에 추가하여 전역적으로 적용될 수 있도록 합니다.

 

// index.tsx

import React from 'react';
import ReactDom from 'react-dom';
import App from './App';
import './main.css';

ReactDom.render(<App />, document.querySelector('#root'));

 

 

 

[ 7. 테스트 ]

 

tailwind가 잘 적용되는지 다음과 같이 간단하게 코드를 작성해보겠습니다.

 

import React from 'react';

const App = () => {
    return (
        <div>
            <h2 className="text-blue-500 text-xl font-bold">Hello, React!</h2>
            <p className="text-lg font-medium">Hello, Typescript!</p>
        </div>
    );
};

export default App;

 

 

 

코드를 작성하고 서버를 실행하면 다음과 같이 원하던 스타일대로 css가 적용된 것을 볼 수 있습니다.

 

테스트 결과

 

 

 

 

VSCode 플러그인

 

vscode를 이용하여 tailwind를 활용할 때 도움이 되는 플러그인이 2가지가 있습니다.

 

첫 번째는 Tailwind CSS IntelliSense입니다.

 

tailwind css intellisense

 

 

 

해당 플러그인은 tailwind의 자동완성을 할 수 있게 도와줍니다.

 

기존 css 작성 방식과 달리 사용되는 tailwind를 처음 사용할 때 IntelliSense는 정말 많은 도움이 됩니다.

 

IntelliSense 자동완성

 

 

 

두 번째는 Tailwind CSS Highlight Intellisense입니다.

 

tailwind css highlight intellisense

 

 

해당 플러그인은 tailwind가 적용된 class가 있을 경우 점선으로 표시를 해줍니다.

 

어느 코드에 tailwind가 적용되어 있는지 확인 가능하며 또한 동일 class안에 여러 개의 스타일이 적용되었을 때 각각의 스타일을 구분하여 읽을 수 있도록 도와줍니다.

 

Intellisense highlight

 

 

 

 

 

 

 

 

이상으로 tailwind 사용하기 중 첫 번째인 개념 및 설정에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.