[Tailwind CSS] #2. Tailwind CSS 설치

mozza·2024년 5월 31일

React Tailwind CSS Tailwind CSS IntelliSense Tailwind CSS 설치 Unknown at rule vscode

Tailwind CSS

목록 보기

2/8

저번 시간에는 Tailwind CSS가 무엇인지, 그리고 장단점이 무엇인지에 대해 알아보았다.
그렇다면 오늘은 직접 설치해 보고 간단하게 실습해보자!

1. 설치

Tailwind CSS를 설치하는 방법은 여러가지가 있다 :)
사용하는 프레임워크나 도구에 따라 설치 방법이 조금씩 다르다고 한다.
공식 문서를 참고하여 각자 맞는 방식으로 설치하면 될 것 같다!
난 React를 사용하고 있어 해당 방식으로 설치해보겠다 👍

① create-react-app

ⓐ yarn

yarn create react-app my-app

ⓑ npm

npm init react-app my-app

ⓒ npx

npx create-react-app my-app

이제 내 프로젝트 위치에서 Tailwind CSS를 설치해보자!

② Tailwind package 설치

ⓐ yarn

yarn add -D tailwindcss postcss autoprefixer // Tailwind CSS 및 autoprefixer, PostCSS 설치
yarn tailwind init -p // tailwind.config.js 파일 생성

autoprefixer 및 PostCSS가 무엇인지 궁금하다면 이 포스팅을 보러가자 :)

ⓑ npm, npx

npm i -D postcss autoprefixer tailwindcss
npx tailwindcss init

③ tailwind.config.js 파일 설정

생성된 tailwind.config.js 파일을 들어가보면 초기값은 아래와 같다

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

여기서 content에 다음의 내용을 추가해준다

module.exports = {
  content: [
  	"./src/**/*.{js,jsx,ts,tsx}",  // src 하위 파일 중 확장자가 .js, .jsx, .ts, .tsx인 파일을 tailwind CSS의 대상으로 함
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

④ index.css 파일 설정

index.css 파일에 다음과 같이 directive를 추가해준다!

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

그 다음 index.js에서 index.css가 import 되어 있는지 확인해주면 준비는 끝난다!

❗️하지만 여기서 문제가 생겼다. 아래 ⑤를 보자

⑤ Unknown at rule @tailwind 해결

위 사진처럼 index.css에 directive를 추가했는데 CSS syntax warning이 뜨는 것이다!

😀 알아보니 @를 사용한 문법에 대한 VSCode의 설정을 변경해주면 손쉽게 해결할 수 있는 문제였다.
아래 단계를 통해 설정을 변경해주자 :)

ⓐ VSCode 설정 창 열기 (cmd + , 혹은 ctrl + , )

ⓑ 검색창에 unknown 입력

ⓒ 아래 사진처럼 warning으로 설정된 값을 ignore로 변경