728x90
반응형
styled component 를 써오던 나였는데, 이번에 동기와 작은 프로젝트 개발을 하나 하면서
동기가 tailwind css 에 대해서 알려줬다.
일단 공식은 여기다
https://tailwindcss.com/docs/installation
사용 방법
일단 터미널에서 설치부터
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";
♥️♥️
728x90
반응형