Tailwind 설치 가이드, 설정

민갱·2023년 1월 31일

React

목록 보기

6/20

프론트 엔드 개발자로 나는 css 도 완벽히 모르는게 맞다 :(
근데 이것저것 듣는것은 많아서 요즘 뭐가 대세래~ 요런 것들은 주워듣는 편이다.
Tailwind는 너무 자주 들어 귀에 익어 있는 프레임 워크고 설치라도 해보고 맛이라도 봐보려고 한다.

소개

공식 : https://tailwindcss.com/
TailwindCSS는 CSS 프레임워크다.
TailwindCSS가 사용자도 많아지고, 사용자의 만족도도 확실히 높은 프레임워크임에는 틀림이 없는 것 같다.
트렌드 한번 쫒아가보자💁

출처

특징(장점)

TailwindCSS의 특징.

클래스명에 직접 CSS옵션을 적용하기때문에, 클래스 이름을 크게 고민할 필요가 없다.
CSS의 많은 부분을 직관적인 추상화를 해주어, 간단하게 입력이 가능하다.
필요한 부분은 커스텀마이징을 통하여 기능을 추가 할 수 있다.
실제 CSS를 사용하는것과 이름 등이 크게 다르지 않으며, 마우스를 hover 할 경우, 실제 CSS에서 어떻게 - 적용되는지 알 수 있다.
반응형 환경을 조금 더 쉽게 조작 할 수 있다.
VS코드를 사용할경우 자동완성 기능을 제공해주는 Tailwind CSS IntelliSense 라는 확장프로그램이 있다.

실제 프로젝트나 개발을 하다보면 가장 아래 두 부분이 좀 구미가 당기게 만드는 느낌

설치

나는 이미 프로젝트가 있어서 해당 프로젝트에 설치를 진행하려 한다.
공식문서의 설치방법

1.

npx create react-app project
폴더로 이동후, tailwind 및 tailwind Lib를 설치
npm install tailwindcss postCSS와 autoprefixer
npx tailwindcss init 을 실행하면 tailwind.config.js 파일이 생성된다.
설치된 tailwind.config.js 에서 다음과 같이 설정을 진행한다. content 옵션은 tailwindCSS가 적용되는 범위를 설정한다.

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

2.

index.js에 파일을 import 한다.
나는 index.css를 이미 지워버려서 tailwind.css로 파일을 새로 만들었지만 index.css 안의 내용을 지우고 아래 내용을 붙여 넣어서 import해도 관계없다.
tailwind는 기본적으로 사용하는 nomalize가 있기때문에,별도로 reset.css 등을 적용하려 한다면 정상적으로 작동하지 않습니다.

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

tailwind.css

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { ThemeProvider } from "styled-components";
import { theme } from "./theme";
import "./tailwind.css";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  // <React.StrictMode>
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>
  // </React.StrictMode>
);

<React.StrictMode> 내용을 주석 처리한 이유는 Route의 Link 가 동작을 안해서 해당 내용을 지우면 Link 가 정상적으로 동작함

여기 까지 하면 기본적인 세팅은 끝이다.

테스트

   <Header>
        <h1 className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
          hello Tailwind!
        </h1>
</Header>

comment

각 컴포넌트 마다 import를 해주지 않고, index.js에만 import를 해주면 되는게 느낌있다.
Tailwind 자체에서 설정 되어있는 클래스 이름을 가져다가 사용하는 것 같은 느낌 하여튼 꽤나 편리하네,,? 커스텀도 편리하게 가능하다 하니 요거 약간 느낌 있다.