[React] Tailwind CSS 사용하기

styled component 를 써오던 나였는데, 이번에 동기와 작은 프로젝트 개발을 하나 하면서

동기가 tailwind css 에 대해서 알려줬다.

 

일단 공식은 여기다

https://tailwindcss.com/docs/installation

Installation - Tailwind CSS

---

사용 방법

 

일단 터미널에서 설치부터

npm install -D tailwindcss
npx tailwindcss init

그리고 tailwind.config.js 파일에다가 

module.exports = {
  content: [
    "./pages/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

이런식으로 지정해주고(pages 랑 coomponents 라는 폴더에 개발을 할 경우)

 

global.css 에 다음과 같이 써준다.

//global.css
@tailwind base;
@tailwind components;
@tailwind utilities;

나의 경우엔 index.css에 써줬다.

---

(개인적인) 이용 후기

 

styled component 는 classname 을 직접 정해줘야하고, 스타일을 분리해서 적는 반면

tailwind는 태그에다가 css 를 직접 적어주는 방식이었다.

 

둘다 사용해본 입장에서, 간단한 css 를 입히기에는 tailwind가 굉장히 편하지만

스타일이 엄청 많이 들어가기 시작하면 가독성이 안좋아지는 것 같다. 

그래서 개인적인 결론으로는 스타일이 많이 들어갈때에는 styled component를 쓰고, 간단한건 tailwind를 쓰는 방식으로 섞어써도 좋을 것 같다는 생각이 들었다!

 

무엇보다 tailwind는 className 고민 안해도 돼서 좀 좋았던 것 같다(맨날 작명하느라 혼자 고민 많이 했었음)

그래도 가독성 좋은 코드는 포기 못하는 것 같다..😛 styled component 도 자주 써야지

 

 

♥️♥️

import tw from "tailwind-styled-components";
import styled from "styled-components";

♥️♥️