Tailwind CSS
- Tailwind CSS는 utility-first framework이다.
- 미리 정의된 CSS 클래스를 사용해 스타일을 적용할 수 있게 해 준다.
- 클래스를 이용해 HTML에 조합해서 사용할 수 있다.
설치: Tailwind CSS
https://tailwindcss.com/docs/installation
npm install -D tailwindcss
- node 버전 12 이상이어야 한다.
VSCode extensions 설치
Tailwind CSS intellSense : 클래스 이름 자동완성 기능
필요 없는 파일 제거
- App.css
- index.css
- logo.svg
코드 초기화
// App.tsx
function App() {
return <div>HELLO</div>;
}
export default App;
// index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: <https://bit.ly/CRA-vitals>
reportWebVitals();
postcss 설치 및 config 파일 생성
CSS를 post process 할 수 있게 해주는 라이브러리이다.
https://tailwindcss.com/docs/installation/using-postcss
설치 : postcss
npm install -D tailwindcss postcss autoprefixer
autoprefixer는 postcss의 또 다른 플러그인이며 클래스 이름에 접두사 호환성을 추가해주는 것
예시로 border-radius, 파이어폭스에 호환되기 위해 사용하는 -moz-border-radius 같은 것이다.
postcss config 파일 생성
// postcss.config.js
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {}
},
plugins: []
};
tailwind를 일반 CSS파일로 빌드하기 위해 postcss config 파일이 필요하다.
tailwind.config 파일 생성
// tailwind.config.js
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx,html}", "./public/index.html"],
theme: {
extend: {}
},
plugins: []
};
tailwind를 커스터마이즈 하기위해 tailwind config 파일이 필요하다.
클래스 이름을 자동완성 해주는 VSCode 확장인 Tailwind CSS intellSense는 tailwind.config.js 파일을 자동으로 찾는다.
CSS include 하기
// src/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
파일 이름은 임의로 정해도 된다.
https://tailwindcss.com/docs/installation/using-postcss
- post CSS가 이 파일을 보고 코드 세 줄을 Tailwind가 갖고 있는 모든 클래스 이름으로 바꾼다.
- tailwind config 파일을 들여다 보고 새 클래스 이름이 있다면 그것도 추가해준다.
post CSS를 통해 tailwind.css 파일 변형
// src/styles/tailwind.css
@tailwind base;
@tailwind components;
.btn {
@apply px-4 py-2 bg-blue-600 text-white rounded;
}
@tailwind utilities;
tailwind CSS 파일 빌드
// 예제
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
// src/styles/tailwind.css
"scripts": {
"tailwind:build": "tailwind build ㅊ ./src/styles/tailwind.css -o ./src/styles/styles.css",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
- INPUT : -i ./src/tailwind.css
- OUPUT : -o ./src/styles/styles.css
실행
npm run tailwind:build
빌드된 css를 import 하기
// index.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "./styles/styles.css";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: <https://bit.ly/CRA-vitals>
reportWebVitals();
react application을 start 하는 방식 변경
// package.json
"scripts": {
"tailwind:build": "tailwind build -i ./src/styles/tailwind.css -o ./src/styles/styles.css",
"start": "npm run tailwind:build & react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
start 할 때 먼저 tailwind:build를 실행시키고 그다음 start를 실행하기
스티일 지우기
// src/app.tsx
function App() {
return (
<div className="bg-orange-100">
<h1 className="btn">HELLO</h1>
</div>
);
}
export default App;
// src/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
실행
npm run start
btn 스타일이 작동하지 않으면 잘된 것