TailwindCSS Setup

 

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

Install Tailwind CSS using PostCSS - Tailwind CSS

 

 

설치 : 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 스타일이 작동하지 않으면 잘된 것