[CSS] Tailwind CSS란 무엇이고 어떻게 사용할 수 있을까?

기존 프로젝트에서 UI 컴포넌트를 라이브러리로 대체하기 위해서 리엑트의 여러 UI 라이브러리를 비교 분석하던 와중에 Tailwind CSS라는 용어가 나왔다.

오늘은 Tailwind CSS가 무엇인지 한번 알아보자.

What is Tailwind CSS and How Can I Add it to my Website or React App?

CSS는 여러분의 최고의 혹은 최악의 친구가 될수있는 기술이다. 놀라울 정도로 유연하고 마법과 같은 효과를 일으키지만, 올바른 관리와 집중을 하지 않으면 다른 코드와 마찬가지로 유지보수가 어려워진다.

어떻게 Tailwind CSS가 어플리케이션의 스타일 관리를 용이하게 도와주는 것일까?

What is Tailwind?

Tailwind CSS는 "utility-first" CSS 프레임워크로 다양한 CSS 클래스 카탈로그와 웹사이트나 애플리케이션의 스타일링을 빠르게 작업할 수 있는 도구를 제공한다.

Tailwind의 목표는 프로젝트를 진행하면서 연속된 스타일과 씨름하지 않고 지난 2년간 개발자를 괴롭혀온 10개가 넘는 셀렉터를 어떻게 오버 라이딩할 것인지 걱정하지 않도록 하는 것이다.

So what makes Tailwind great?

Tailwind이 내놓은 해결책은 각각의 사용 목적에만 포커스를 둔 다양한 CSS 클래스를 제공하는 것이다. 직접적으로 다량의 CSS 특성을 가지는 .btn 클래스를 호출하는 대신에, Tailwind에서는 bg-blue-500 py-2 px-4 rounded와 같은 클래스들을 버튼 엘리먼트에 추가하거나 .btn 클래스에 이러한 유틸리티 클래스를 적용하는 방식을 이용한다.

Tailwind를 제대로 알기 위해선 알아야 할 부분이 많지만, 이번 튜토리얼에서는 기본에만 집중하도록 하겠다.

Part1: Adding Tailwind CSS to a static HTML page

Tailwind CSS를 정적 HTML 페이지에 적용하면서 우선 시작해 보겠다. 어플이 아닌 Tailwind에 더욱 집중해서 프레임 워크에서 실제로 어떤 일들이 일어나고 있는지 이해하길 바란다.

Step1: Creating a new page

간단하게 새 HTML 파일을 생성하면 된다. 콘텐츠로는 원하는 것 아무거나 사용해도 상관없지만, 필자는 재미를 위해 fillerama.io를 사용했다.

Step2: Adding Tailwind CSS via CDN

Tailwind는 기능을 전부 사용하기 위해선 npm을 사용해 다운로드하기를 권장하지만, 우리의 경우 작동 원리는 이해하기 위함이니 CDN을 이용하겠다.

CDN 파일 링크를 다큐먼트의 <head> 부분에 추가하자.

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

저장하고 페이지를 로드하면, 우선 발견할 수 있는 부분은 모든 스타일이 사라졌다는 것이다!

이는 예상된 결과다. Tailwind는 브라우저간 불일치를 해결하기 위해 preflight styles를 가지고 있다. 그리고 이것은 자신의 스타일 위에서 어플을 구축할 수 있도록 하는 그 유명한 normalize.css를 가지고 있다.

하지만 우리는 Tailwind가 어떻게 스타일을 그리고 원하는대로 스타일을 구축하는지 알고 싶다!

Step 3: Using Tailwind CSS to add styles to your page

Tailwind가 설치되었으니, 라이브러리의 수많은 유틸리티 클래스를 사용해 페이지에 스타일을 추가할 수 있게 되었다.

우선은 문단과 리스트 엘리먼트에 마진을 설정하는 것부터 시작해보자. 이는 각 엘리먼트에. my-5를 추가하면 된다.

<p class="my-5">
  Bender, quit destroying the universe! Yeah, I do that with my stupidness. I never loved you. Moving along…
  Belligerent and numerous.
</p>

클래스명은 다른 클래스를 보며 눈치챌 수 있듯 특정한 패턴을 따른다. my-5 에서 m은 마진(margin) 그리고 y는 y축(y-axis) 그리고 숫자 5는 크기를 나타내고 Tailwind의 경우 rem을 사용한다. 따라서 값은 5 rem이다.

다음으론 헤더를 좀더 헤더처럼 보이도록 만들어 보자. h1태그부터 아래와 같이 설정해보자:

<h1 class="text-2xl font-bold mt-8 mb-5">

위 코드에서는 아래와 같은 일이 발생한다:

text-2x1: 텍스트 사이즈를 2x1로 설정하라. 2x1은 1.5rem이다.
font-bold: 텍스트 굵기를 굵게 설정하라
mt-8: my-5와 같이, 위 마진을 8rem으로 설정하라
mb-5: 아래 마진을 5rem으로 설정하라

h1에 적용한 클래스를 다른 나머지 헤더 엘리먼트에 적용해보자. 하지만 리스트를 내려가면서 아래와 같이 보이도록 폰트 사이즈를 줄여보자:

h2: text-xl
h3: text-lg

다음으론 리스트 엘리먼트를 리스트스럽게 만들어보자. 순서없는 리스트 ul에 아래와 같이 클래스를 추가해보자:

<ul class="list-disc list-inside my-5 pl-2">

추가한 특성:

list-disc: list-style-stype를 disc로 설정 (각 라인의 마커)
list-inside: 리스트와 리스트 아이템의 list-style을 inside로 설정해 리스트 마커의 위치 설정.
my-5: y축의 마진을 5rem으로 설정
pl-2: 왼쪽 패딩을 2rem으로 설정

그리고 순서 리스트(ol)에는 list-disc 이외에 모두 똑같은 클래스를 적용할 수 있다. 순서 리스트에 숫자를 보고 싶다면 스타일 타입을 list-decimal로 변경하면 된다.

<ol class="list-decimal list-inside my-5 pl-2">

그러면 아래 리스트가 완성된다.

마지막으로, max with와 콘텐츠를 가운데에 정렬해 콘텐츠를 좀 더 읽기 쉽도록 만들어보자. <body> 태그에 다음을 추가해라:

<body class="max-w-4xl mx-auto">

주의: 보통은 바디태그에 적용하지 않고 콘텐츠를 싸는 메인 태그에 적용을 한다. 하지만 우리는 기본적인 개념 이해를 위함이므로 아무 데에 적용해도 상관없다. 선호에 따라 메인 태그에 적용해도 된다.

이러면 페이지가 완성된다!

Step4: Adding a button and other components

마지막 예제로 정적 페이지에 버튼을 추가해보자.

TailWidn의 한 가지 트릭은 고의로 미리 완성된 컴포넌트 클래스를 제공하지 않는다는 것이다. 왜냐하면 어쨌든 사람들은 의도한 대로 보이기 위해 컴포넌트를 오버라이드 할 것이기 때문이다.

즉, 유틸리티 클래스를 이용해 자신만의 컴포넌트 클래스를 만들어 볼 것이다.

우선, 새로운 버튼을 추가하자. 페이지 어느곳에 아래 스니펫을 추가해라. 필자는 첫 p 태그 아래에 추가하였다.

<button>Party with Slurm!</button>

다른 기타 엘리먼트와 마찬가지로 스타일이 없는 것을 확인할 수 있다. 하지만 클릭을 해보면 여전히 클릭 액션이 있는 것을 확인할 수 있다. 이것을 좀 더 버튼처럼 만들어 보자.

아래와 같은 클래스를 추가하자:

<button class="text-white font-bold bg-purple-700 hover:bg-purple-800 py-2 px-4 rounded">
  Party with Slurm!
</button>

어떤 일이 일어나는지 살펴보면:

text-white: 텍스트 컬러를 흰색으로 설정한다.
font-bold: 텍스트의 중량을 굵게 설정한다.
bg-purple-700: 버튼의 백그라운드를 보라색으로 설정하고 음영을 700으로 설정한다.
hover: bg-purple-800: 유저가 버튼 위에 커서를 올려주면, 배경색의 음영을 800으로 설정한다.
py-2: y축 패딩을 2rem으로 설정한다.
px-4: x축 패딩을 4rem으로 설정한다.
rounded: border radius를 설정해 모서리 부분을 둥글게 한다. TailWind에서 둥근 모서리 값은 0.25 rem이다.

이러면 버튼이 완성된다!

위와 같은 방법을 적용하고 싶은 아무 컴포넌트에 사용하면 된다. 수작업이긴해도 리엑트와 같은 다이내믹한 프로젝트에서 제작 과정을 얼마나 쉽게 해 주는지 알 수 있을 것이다.

Part2: Adding Tailwind CSS to a React app

좀 더 실무에 사용할 수 있도록 이번에는 Tailwind CSS를 리엑트에 사용해 보자.

우선, Create React App을 설치해 처음부터 프로젝트에 사용하는 단계부터 끝에서는 이전 예제를 리엑트상에서 재구성해보도록 하겠다.

Step 1: Spinning up a new React app

너무 자세하게 이 단계에 대해 설명하진 않겠다. 요지는 Create React App을 이용해 새로운 리엑트 앱을 부트스트랩 하는 것이다.

시작하기에 앞서, 공식 리엑트 문서에서 설명하는 과정을 따라 앱을 생성할 수 있다.

https://reactjs.org/docs/create-a-new-react-app.html

그리고 개발환경 서버를 실행하면 새로운 앱을 확인 할 수 있다.

마지막으로, 이전 콘텐츠를 어플로 옮겨보자. <body> 태그 안의 모든 내용을 복사하고 <div className="App">에 붙여 넣기 하면 된다.

다음으로 모든 class=" 특성을 className="으로 변경하여 리엑트 내에서 사용할 수 있도록 한다.

마지막으로, <div> 래퍼의 App 클래스명을 <body> 태그에서 사용했던 클래스로 변경하라.

변경된 내요을 저장하고 서버를 다시 실행하면, 꽤나 괜찮게 보인다.

리엑트는 자체적으로 기본 스타일을 내장하고 있다. 따라서 괜찮게 보이는 것이지 Tailwind를 아직 정용한 것은 아니다. 이제 한 번 적용해 보도록 하자!

Step2: Installing Tailwind in your React app

Tailwind를 설치하고 어플에서 실행시키기 위해선 몇 가지 과정이 필요하다. 설정이 잘 이루어지도록 아래 과정을 조심히 따라 하길 바란다.

우선, 의존설정이다:

yarn add tailwindcss postcss-cli autoprefixer
# or
npm install tailwindcss postcss-cli autoprefixer

Tailwind의 문서에 따르면, Tailwind가 파이프라인에 올바르게 추가되기 위해선 스타일 처리가 필요하다. 따라서 위에서 추가해준 것들은:

tailwindcss: Tailwind 패키지
postcss-cli: Create React App은 이미 postcss를 사용한다. 하지만 Tailwind가 필드 처리에 포함되고 처리가 이루어지기 위해선 환경설정이 필요하다.
autoprefixer: Tailwind는 벤더 프리픽스가 없다. 따라서 autoprefixer를 설치해 핸들링해줘야 한다. 이는 postcss 환경설정의 부분으로 동작한다.

코딩 작업을 좀 더 편하게 만들어주는 두 개의 의존 설정도 추가한다:

yarn add concurrently chokidar-cli -D
# or
npm install concurrently chokidar-cli --save-dev

concurrently: 다량의 커맨드를 한 번에 할 수 있도록 해주는 패키지. 스타일과 리엑트 앱을 동시에 지켜봐야 하기 때문에 유용하다.
chokidar-cli: 파일을 보고 변경되었을 때 커맨드를 실행할 수 있도록 한다. CSS 파일을 지켜보고 CSS 변경에 따라 빌드 프로세스를 실행하는 데 사용할 것이다.

다음은 postcss 환경설정을 해보자. 프로젝트의 루트에 postcss.config.js 파일을 만들고 아래 내용을 추가해라:

// Inside postcss.config.js
module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ],
};

이는 Tailwindcss와 Autoprefixer 플러그인을 postcss 환경에 추가한다.

환경 추가가 완료되었다면 이를 빌드와 와치 프로세스에 추가시켜야 한다. package.json안에 script 특성에 아래 정의를 추가해라:

"build:css": "tailwind build src/App.css -o src/index.css",
"watch:css": "chokidar 'src/App.css' -c 'npm run build:css'",

추가로, start와 build에 아래 명령어를 포함시켜라:

"start": "concurrently -n Tailwind,React 'npm run watch:css' 'react-scripts start'",
"build": "npm run build:css && react-scripts build",

환경설정이 끝났다면 이제 스타일을 적용시켜보자.

App.css 파일 안의 내용을 통째로 아래와 같이 바꾸자:

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

이는 Tailwind의 기본 스타일, 컴포넌트, 그리고 유틸리티 클래스를 임포트 해 Tailwind가 작동하도록 한다.

App.js파일에 App.css 임포트를 삭제해도 괜찮다 왜냐하면 index.css에 바로 추가될 것이기 때문에 아래 코드를 지워주자:

import './App.css';

이 과정이 끝났다면 이제 다시 개발 서버를 실행시키면 된다! 만약 이미 실행 중이었다면 환경설정 변경이 적용되도록 다시 실행시켜 주자.

이러면 이전 예제와 똑같은 화면이 만들어진다!

Step 3: Creating a new button component class with Tailwind

Tailwind는 이미 완성된 컴포넌트 클래스를 제공하지 않지만, 그것을 제작하기 쉽도록 해준다.

새 컴포넌트 제작에 앞서 만들었던 버튼을 이용해 볼 것이다. btn-purple 색 변경 키워드를 활용해 새로운 btn 클래스를 만들어 볼 것이다.

처음 해볼 것은 App.css 파일을 열어 새로운 클래스를 생성할 것이다. 파일에 아래와 같이 추가하자:

.btn {
  @apply font-bold py-2 px-4 rounded;
}

만약 HTML을 기억한다면, 이미 <button> 엘리먼트에 똑같은 클래스를 포함하고 있다. Tailwind는 이러한 스타일을 다른 클래스를 생성할 때 유틸리티 클래스를 포함하거나 적용시킬 수 있도록 한다. 우리의 경우 .btn 클래스가 그러하다.

그리고 클래스를 생성했으니, 버튼에 한번 적용시켜 보자:

<button className="btn text-white bg-purple-700 hover:bg-purple-800">
  Party with Slurm!
</button>

페이지를 열면, 버튼이 똑같이 보이는 것을 확인할 수 있다. 엘리먼트를 개발자 도구로 살펴보면 .btn 클래스에 해당 스타일들이 생성된 것을 확인할 수 있다.

다음으로, 색 변경 클래스를 만들어보자. 이전에 했던 것과 마찬가지로, 아래 규칙을 추가할 것이다:

.btn-purple {
  @apply bg-purple-700 text-white;
}

.btn-purple:hover {
  @apply bg-purple-800;
}

여기서, 백그라운드 컬러와 텍스트 컬러를 버튼 클래스에 추가한다. 그리고 호버링 했을 때 어두운 색으로 변경되는 기능을 적용한다.

그리고 새로운 클래스를 아래와 같이 적용시킨다.

<button className="btn btn-purple">
  Party with Slurm!
</button>

이렇게 겉으로는 변화되지 않았지만 새로운 클래스 버튼이 추가된 화면을 확인할 수 있다.

출처: https://www.freecodecamp.org/news/what-is-tailwind-css-and-how-can-i-add-it-to-my-website-or-react-app/

What is Tailwind CSS and How Can I Add it to my Website or React App?

CSS is a technology that can be your best or worst friend. While it's incredibly flexible and can produce what seems like magic, without the proper care and attention, it can become hard to manage like any other code. How can Tailwind CSS help us to take c

www.freecodecamp.org

'Front-End > HTML_CSS' 카테고리의 다른 글

[CSS] 반응형 웹페이지의 높이 설정 (0)	2022.07.30
[CSS] CSS Glitch Art 효과 (0)	2022.07.23
[CSS] 두번째 줄에 ellipsis를 어떻게 적용시킬까? (0)	2022.05.24
[HTML] tabindex란? (0)	2022.04.23
[CSS] Position absolute 정리 (0)	2022.01.07

Swimming In Dev

[CSS] Tailwind CSS란 무엇이고 어떻게 사용할 수 있을까?

What is Tailwind CSS and How Can I Add it to my Website or React App?

What is Tailwind?

So what makes Tailwind great?

Part1: Adding Tailwind CSS to a static HTML page

Step1: Creating a new page

Step2: Adding Tailwind CSS via CDN

Step 3: Using Tailwind CSS to add styles to your page

Step4: Adding a button and other components

Part2: Adding Tailwind CSS to a React app

Step 1: Spinning up a new React app

Step2: Installing Tailwind in your React app

Step 3: Creating a new button component class with Tailwind

'Front-End > HTML_CSS' 카테고리의 다른 글

티스토리툴바

[CSS] Tailwind CSS란 무엇이고 어떻게 사용할 수 있을까?

What is Tailwind CSS and How Can I Add it to my Website or React App?

What is Tailwind?

So what makes Tailwind great?

Part1: Adding Tailwind CSS to a static HTML page

Step1: Creating a new page

Step2: Adding Tailwind CSS via CDN

Step 3: Using Tailwind CSS to add styles to your page

Step4: Adding a button and other components

Part2: Adding Tailwind CSS to a React app

Step 1: Spinning up a new React app

Step2: Installing Tailwind in your React app

Step 3: Creating a new button component class with Tailwind

'Front-End > HTML_CSS' 카테고리의 다른 글

관련글

티스토리툴바