[css] tailwind css

tailwind css 를 설치하는데 너무 애를 먹었다.
공식문서대로 깔았는데, 자꾸 에러가 났다.

Error: Cannot find module 'autoprefixer’

이유를 알았다. 아마 npx를 써서 깔아서 그런 것 같다.
왜냐면 그 모듈은 npx로 실행할 수 없고 npm으로 인스톨해야한다고 나와있더라.

이렇게 했을 때도 무한로딩되면서 dev가 열리지 않았다.
혹시 몰라서 package-lock.json 과 node_modules를 삭제, 이후 다시 인스톨한 후 npm run dev를 돌리면 tailwindcss가 정상작동 되는 모습을 볼 수 있다.

그리고 rm -rf 같은 명령어는 리눅스명령어 이다.
윈도우 환경에서는 rm → rmdir  로 변경해서 사용해준다.

Tailwind CSS

Tailwind CSS는 "utility-first" CSS 프레임워크로, HTML 요소에 직접적으로 클래스를 적용하여 스타일을 지정한다. 예를 들어, bg-blue-500과 같은 클래스를 사용하여 배경 색상을 지정하거나 p-4와 같은 클래스를 사용하여 패딩을 추가할 수 있다. 또한, Tailwind CSS는 모듈식이며 커스터마이징이 쉽다.

사용법

1. extension탭에서 tailwindcss install한다.

2. 터미널창에 npm install -D tailwindcss postcss autoprefixer 입력한다.

3. 터미널창에 npx tailwindcss init 입력한다.

4. app.css 에 붙혀넣기

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

5. 생성된 tailwind.config.js에 아래코드를 붙혀넣는다.

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

6. 이 후 공식웹사이트를 참고하여 className에 style을 부여해준다.