Tailwind CSS는 클래스 이름에 대한 모든 HTML 파일, JavaScript 구성 요소 및 기타 템플릿을 스캔하고 해당 스타일을 생성한 다음 정적 CSS 파일에 작성하는 방식으로 작동합니다.

Tailwind Docs

HTML 태그에 Tailwind에서 제공하는 클래스를 통해 스타일을 적용할 수 있다. (어디서나 사용가능)

설치

터미널

// npm
npm install -D tailwindcss

// yarn
yarn add -D tailwindcss

----------------------------

npx tailwindcss init

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 사용하려는 확장자 명시
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

제일 상위 css

@tailwind base;
@tailwind components;
@tailwind utilities;

적용예시

import './App.css';

// Tailwind에서 제공하는 class 명시하면 적용된다.
function App() {
  return (
    <div className='App'>
      <h1 className='text-xl font-medium text-lime-400'>Hello!</h1>
    </div>
  );
}

export default App;

Tailwind TIP

단축키

Ctrl + Space를 입력하면 Tailwind에서 제공하는 클래스 종류가 나온다.

Extensions

Tailwind 클래스를 명시할때 힌트를 준다.

Tailwind CSS IntelliSense