[React]Tailwind CSS 적용해서 사용하기

테일윈드 란

- 유틸리티 우선 CSS 프레임워크로써 미리 정의된 스타일을 사용하는 것이 아니라

사용자가 원하는 대로 각 속성 값을 적용하고 사용하는 것임.(간단하게)

 

기존에 사용하던 scss,sass말고 요즘 많이 사용하는 테일윈드를 사용해서 새롭게 프로젝트를 진행 했었는데

사용한 후기의 제일 큰 장점은 한 파일에 css코드까지 다있어서 직관적이고 한 눈에 다 보기 쉬운 것이였지만

처음에는 확실히 적응하는데 시간이 걸리지만 그렇게 어렵지 않아서 적응만 하면 충분히 좋은 것 같습니다.

 

간단하게 사용하는 방식은

<div className="bg-white text-xl mr-1>Hello</div> 이런식으로

- 배경은 흰색(bg-white)

- 배경은 흰색(text-xl) 대략 20px 전후

- 배경은 흰색(mr-1) margin-right: 0.25rem (4px) 를 적용

 

이런식으로 사용

 

Tailwind 라이브러리 설치

npm i tailwindcss 이렇게 해도 되지만 추천은

npm i tailwindcss autoprefixer 이거

 

그리고 

 

npx tailwindcss init -p 이것까지(tailwind.config.js / postcss.config.js 생성)

• autoprefixer : CSS를 최적화하고 압축하며 불필요한 공백을 제거

Tailwind CSS 전역사용 파일 (main.css 설정)

'components/main.css' 새 파일 생성

Tailwind는 전역 방식으로 사용되서 최상위 CSS에 지시문을 추가

 

@import 'tailwindcss/base';

@import 'tailwindcss/components';

@import 'tailwindcss/utilities';

 

그 다음 최상위 컴포넌트에 import하면 자식 컴포넌트에서도 사용가능

 

// ▶ 📁components/📜main.tsx

import React from 'react';

import ReactDOM from 'react-dom/client';

import App from './app';

import './main.css'; // ▶ Tailwind CSS 가져오기

 

const root = ReactDOM.createRoot(document.querySelector("#reactRoot") as HTMLElement);

 

root.render(

        <App/>

)

 

PostCSS 설정 파일(postcss.config.js) 설명 

'postcss.config.js' 새 파일 생성 (만약에 없으면)

-root(최상위)경로에 생성 후 밑에 코드 작성

 

• autoprefixer : CSS가 다양한 브라우저에서 잘 작동하도록 도와주는 도구
• tailwindcss : 사용할 Tailwind CSS 라이브러리
• plugins : 두 도구(autoprefixer 와 tailwindcss) 연결

 

import autoprefixer from 'autoprefixer';

import tailwindcss from 'tailwindcss';

export default {

        plugins: [

               autoprefixer,

               tailwindcss

         ]

}

 

Tailwind CSS 설정 파일(tailwind.config.js)

Tailwind CSS를 원하는 파일에서 사용할 수 있음. 이것도 만약에 없으면 생성 root(최상위)경로에

• content : Tailwind CSS가 적용될 파일을 지정하는 옵션

/** @type {import('tailwindcss').Config} */

export default {

     content: [

         './components/**/*{.jsx,.tsx}'

      ],

      theme: {

          extend: {},

       },

       plugins: [],

}

 

'./components/**/*{.jsx,.tsx}'
components 폴더 아래의 모든 하위 폴더에서
.jsx 와 .tsx 로 끝나는 파일에 Tailwind CSS를 적용

 

마지막으로 text-lg 이렇게 말고도 직접 값을 넣는 것도 가능

<div className="text-[15px]"></div>