Tailwind CSS란?

HTML을 남기지 않고 웹 사이트를 빠르게 구축할 수 있게 도와주는 도구

flex, pt-4, text-center 와 같은 클래스로 채워진 utility-first CSS 프레임워크이다. 어떠한 설계도 직접 빌드 할 수 있다.

Tailwind CSS

설치하기

설치, 적용도 그렇게 어렵지않다.

1. 터미널에 다음 명령어를 입력한다.
   npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

2. 그 다음 프로젝트 폴더에 postcss.config.js 파일을 생성하고 다음 코드를 작성한다.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

3. npx tailwindcss init 명령어를 입력했을때 tailwind.config.js 파일이 생겼을 것이다. 다음과 같이 수정한다.

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

4. css파일을 하나 만들고, 다음과 같이 작성한다.

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

5. index.js에 4번에서 만든 css를 적용시킨다. (나는 tailwind 코드를 index.css에 작성했다.)
   

---

5번까지 잘 진행했으면, 서버를 한번 껐다 켜야 적용이된다!

그리고 VSC Tailwind CSS IntelliSense 익스텐션도 받는걸 추천한다.
tailwindcss의 AutoComplete, Linting, Hover previews, Syntax Highlighting 등의 기능을 제공해준다.

TailwindCSS의 사용법은 공식홈페이지에 아주 자세히 나와있으니, 천천히 읽어보면서 익혀보길 추천한다!

https://tailwindcss.com/docs/utility-first