[CSS] TailwindCSS

1. 설치

npm install -D tailwindcss

 

2. tailwind.config.js 파일 생성

npx tailwindcss init

 

3. tailwind.config.js

tailwind.config.js 파일을 다음과 같이 설정해주었다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,htm,js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

4. css 파일 생성

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

 

5. import

만약 리액트에서 사용한다면 4번에서 만든 CSS 파일을 App.js에서 import 해주면 된다.

 

6. class

tailwindcss의 클래스를 참고하기 위한 사이트 (공식문서)

Installation - Tailwind CSS

 

 

🚩 참고

Installation - Tailwind CSS