사이드 프로젝트 진행 2일차.
각각 다른 프로젝트를 진행하는 지인과 온라인으로 스터디 겸 진행 중에 있다.
오늘은 tailwindcss 적용해보자.
0. 들어가는 글
원래는 리액트 환경에서 컴포넌트마다 css를 직접 넣어주는
styled-components를 사용했었는데 이번에는 새로운 경험을 해보고자 Tailwind CSS를 시작했다.
이런 라이브러리 특성이 뭐냐면
클래스명을 전부 외워야 한다는 것이다.
이게 진짜 안 좋다.
예전 부트스트랩처럼 만든 것 같은데 스타일링에 대한 것은 워낙 유행이 빠르기 때문에
"쉽고 편하니까 지금 이거 열심히 공부해야지~"는 파멸의 지름길이다.
CSS에 대해서 정확히 알거나 배우고 싶다면 styled-components에 익숙해지거나 차라리 SCSS(Sass) 같은 것에 익숙해지는 것이 훨씬 웹 기술을 제대로 배우는 길일 것이다.
나는 대충 CSS가 어떻게 동작하는지 아는 적당히 고인물(?)이므로
Tailwind CSS로 진행해보고자 한다.
1. 설치방법
모든 프로그래밍 환경이 마찬가지지만,
본인의 프로젝트가 어떻게 파일/디렉토리가 구성되어있느냐에 따라 달라진다.
일단 설치할 모듈은 크게 3가지이다.
tailwindcss, postcss, autoprefixer이다.
각 모듈에 대해서는 나중에 쉽게 설명하는 글로 수정할 예정이다.
(오늘 배워서 저도 잘 모릅니다요..)
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
이렇게 설치하면 tailwindcss 설치와 관련된 환경 파일이 프로젝트에 세팅된다.(postcss.config.js // tailwind.config.js)
이 상태로 tailwind.config.js안에서 본인이 가지고 있는 HTML, JS 파일 환경을 알려줘야 한다.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
};content 변수에 본인의 프로젝트에 있는 파일들을 알려주자.
그리고 index.css에 해당 문구를 가장 위에 삽입한다.
@tailwind base;
@tailwind components;
@tailwind utilities;
그 뒤에 내가 사용하고 싶은 className을 입력해주면 화면이 알아서 잘 뜬다.
import "./App.css";
function App() {
return (
<button
className="py-2
px-4
font-semibold
rounded-lg
shadow-md
text-white
bg-green-500
hover:bg-green-700">
hello!
</button>
);
}
export default App;
메인 App.js에 예시로 담은 버튼이다.
이렇게 되면 성공이다.
앞으로 여러 클래스를 외워야 하는 힘든 시기를 거쳐야 할 듯....