테일윈드 css 설치하고 사용하기

 

맨날 직접 css 작성하다가 부트스트랩 한번 써보고싶어서 한번 해봄

완전 조음

설치하기

https://tailwindcss.com/docs/installation

Installation - Tailwind CSS

테일윈드 css 들어가면 설치 방법이 있는데

따라하다가 헷갈리는 부분이 있어서

까먹을까봐 쓴다

 

npm install -D tailwindcss
npx tailwindcss init

순서대로 설치해준다

 

src 폴더 밖에 tailwind.confing.js 생기면

 

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

코드 복붙해주기

 

그리고 index.css에 코드 복붙

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

하고나면 또 뭘 설치하라는데 나 이거 대충읽고 복붙해서 설치하니까 계속 파일이없다 경로를 못찾는다 뭐 이런 오류가 계속 나서

왜 안되나 했더니 내가 파일이름 다르게 해놓고 설치하려고 해서 그랬던거임

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

저 input.css 를 index.css로 바꿔준다

 

그리고 퍼블릭 파일에 있는 index.html 파일을 찾아서

<link href="/dist/output.css" rel="stylesheet">

이 코드 복사해주면 끝

 

사용하다 보니까 뭐 아이콘같은거 불러오려면 추가로 또 뭘 설치하라더라

npm install @headlessui/react @heroicons/react

이거 설치하면 됨