Tailwind CSS

1. Tailwind 시작하기[로컬(vscode)에서 실행하는 경우, 코드샌드박스 같은 경우 생략]

• create-react-app
• npx create-react-app (프로젝트명)
• cd (프로젝트명)

2. tailwind package 설치

• npm의 경우

npm add -D tailwindcss postcss autoprefixer
npm tailwind init -p

 

• yarn의 경우

yarn add -D tailwindcss postcss autoprefixer
yarn tailwind init -p

 

add -D package : 필요한 패키지를 install

tailwind init -p : tailwind.config.js 파일을 생성

 

3. tailwind.config.js 설정

npm tailwind init -p 혹은 yarn tailwind init -p을 입력했다면, tailwind.config.js 파일이 생성 되었을 것이다. 

 

▶ tailwind.config.js

module.exports = {
  content: [
  	"./src/**/*.{js,jsx,ts,tsx}",  
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

tailwind.config.js 파일에서 "./src/**/*.{js,jsx,ts,tsx}" 부분을 추가한다.

해당 코드 설정 시 src폴더 내에 확장자가  js, jsx, ts, tsx인 파일인 경우에 적용

 

4. css에 적용하기

▶ src/index.css

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

 

@tailwind base; : Tailwind의 기본 스타일을 포함

이 부분은 브라우저 기본 스타일을 리셋하고, HTML 요소에 대한 기본 스타일을 정의

 

@tailwind components; : Tailwind에서 제공하는 컴포넌트 스타일을 포함

버튼, 카드 등 재사용 가능한 UI 구성 요소에 대한 스타일이 여기서 정의

 

@tailwind utilities; : Tailwind의 유틸리티 클래스들을 포함

유틸리티 클래스는 간단한 스타일을 적용할 수 있는 클래스들로, 마진, 패딩, 색상 등을 조절하는 데 사용

 

index.js에서 import './index.css'; 입력 후 잘 불러오는지 확인한다.