tailwind css 세팅 방법

세팅 방법으로는 총 4가지가 있다.

Tailwind CLI: Tailwind CLI 도구를 이용한 설치 방법으로 가장 빠르고 간결하다. input.css 를 지정하면 그에 따른 output.css 가 나오게 되는 간단한 원리를 가지고 있다.
Using PostCSS: Webpack, Rollup, Vite, Parcel 과 같은 빌드 도구와 가장 깔끔하게 통합되는 방법이다.
Framework Guides: 프레임워크 가이드를 보고 세팅하는 것이다. 공식문서에 자세하게 나와있다.
Play CDN: CDN 을 이용하는 방법인데, 브라우저에서 간단하게 스크립트를 하나 추가하면 할 수 있다. 그러나 프로덕션에 권장되진 않고 개발용으로 사용하면 괜찮다.

tailwindcss 초기 세팅 방법 (Using PostCSS)

의존성 설치

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

tailwindcss, postcss, autoprefixer 를 설치해준다.
나는 npm 이 아닌 pnpm 을 이용해 설치했다.

`postcss.config.js` 설정

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

특별히 아무것도 적지 않아도 상관은 없다.

`tailwind.config.js` 설정

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

tailwindcss 를 사용할 템플릿 파일이 있는 곳을 잘 가리켜주어야 한다.

`main.css` 설정

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

CSS 에 @tailwind directives 를 잘 넣어주어야 한다.

빌드 프로세스 실행

npm run dev

html 에서 tailwindcss 사용하기

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/main.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

위와 같이 <head /> 태그에 임포트 후 사용하면 된다.

tailwind css 는 다양한 커스터마이징이 가능하다.

Tailwind CSS Customization 가이드 에 다양한 커스터마이징 셋업 방법이 나와있다.

tailwind.config.js 내부 `content` 프로퍼티에서 경로는 왜 필요한걸까?

이 궁금증에 대한 답은 Content Configuration 에 자세히 나와있었다. Tailwind CSS 는 모든 HTML, 자바스크립트 혹은 기타 템플릿 파일들을 스캐닝하면서 동작한다. 스캐닝이 끝난 후에는 그에 대응되는 CSS 를 만들어낸다. 필요한 CSS 를 생성하기 위해, Tailwind CSS 는 Tailwind 클래스를 포함하는 모든 파일을 알아야 한다. 이 때 입력되는 경로를 해석하는 라이브러리로 Glob pattern 을 따르는 Node.js 용 라이브러리인 Fast-glob 을 사용하고 있다.

공식 문서에는 프로퍼티 경로를 설정하는 팁이 있다.

너무 광범위한 경로를 설정하지 않도록 주의하자.

css 파일은 절대 넣지 않도록 주의하자.

tailwind css 가 클래스를 감지하는 방법

tailwind css 는 단순히 정규표현식을 이용해서 클래스 이름을 파악하고 있다.

위에서 보듯, tailwind css 는 단순히 class="..." 패턴에 한정지어 클래스 이름을 살펴보는 것이 아니라, 모든 영역을 살펴본다. 왜냐하면, 자바스크립트 소스코드에도 클래스명이 들어갈 수 있기 때문이다.

tailwind css 에서 표현한 아래의 샘플 파일명은 spaghetti.js 인데, tailwind css 에서 그다지 추천하지는 않는 패턴 같다.

<script>
  menuButton.addEventListener('click', function () {
    let classList = document.getElementById('nav').classList
    classList.toggle('hidden')
    classList.toggle('block')
  })
</script>

함께 설치하면 좋은 vscode 플러그인들

prettier-plugin-tailwindcss

prettier-plugin-tailwindcss
- tailwind 클래스명을 정렬해준다.

설치 방법

아래의 의존성을 설치해주자.

npm install -D prettier prettier-plugin-tailwindcss

아래와 같은 prettier.config.js 파일을 생성해주자.

// prettier.config.js
module.exports = {
  plugins: [require("prettier-plugin-tailwindcss")],
  tailwindConfig: "./tailwind.config.js",
};

tailwind css intellisense

tailwind css intellisense

레퍼런스

tailwind css 공식 문서

저작자표시 비영리