소개

Tailwind CSS는 마크업에 직접 스타일을 적용할 수 있는 하위 수준 유틸리티 클래스를 제공하여 개발 주기를 단축하는 인기 있는 유틸리티 우선 CSS 프레임워크입니다.

Prettier는 코드를 구문 분석하고 자체 규칙에 따라 다시 인쇄하여 코드의 형식이 일관되게 유지되도록 하는 널리 사용되는 코드 포맷터입니다. 이는 전체 프로젝트에서 균일한 코드 스타일을 유지하는 데 도움이 되며 코드베이스를 더 깔끔하고 읽기 쉽게 만듭니다.

Tailwind CSS를 사용할 때 흔히 발생하는 문제 중 하나는 특히 스타일과 HTML의 복잡성이 커짐에 따라 유틸리티 클래스의 순서를 관리하는 것입니다. 이러한 클래스를 수동으로 정렬하는 것은 지루하고 오류가 발생하기 쉽습니다. 자동 클래스 정렬이 필요한 곳입니다. prettier-plugin-tailwindcss와 같은 플러그인과 함께 Prettier와 같은 도구를 활용하면 Tailwind CSS 클래스 정렬을 자동화하여 일관된 순서를 보장하고 클래스의 가독성과 유지 관리성을 향상시킬 수 있습니다.

이 문서의 목적은 신규 프로젝트와 기존 프로젝트 모두에서 Prettier를 사용하여 Tailwind CSS 자동 클래스 정렬을 설정하는 과정을 안내하는 것입니다. 새로운 프로젝트를 시작하든 진행 중인 프로젝트에 통합하든 이 포괄적인 가이드는 단계별 지침을 제공합니다.

목차

• 새 프로젝트에서 Tailwind CSS 및 Prettier 설정
  • 프로젝트 초기화 및 Tailwind CSS 설치
  • Prettier 설치 및 구성
• 기존 Tailwind CSS 프로젝트에서 prettier-plugin-tailwindcss 설정
• 결론

새 프로젝트에서 Tailwind CSS 및 Prettier 설정

시작하기 전에 다음이 설치되어 있는지 확인하세요.

• Node.js
• 패키지 관리자(이 프로젝트에서는 bun을 사용할 예정이지만 원하는 경우 npm, Yarn 또는 pnpm을 사용할 수 있습니다.)
• 코드 편집기(예: VS Code)

프로젝트 초기화 및 Tailwind CSS 설치

새 프로젝트를 만드는 것부터 시작하세요. 구체적인 단계는 선호하는 프레임워크나 설정에 따라 달라질 수 있습니다. 자세한 지침은 Tailwind CSS 설치 프레임워크 가이드를 참조하세요. Tailwind CSS 설치 단계를 이미 완료한 경우 기존 Tailwind CSS 프로젝트에서 prettier-plugin-tailwindcss 설정 섹션으로 진행할 수 있습니다. Vite를 사용하여 수행하는 방법은 다음과 같습니다.

bun create vite my-app --template react-ts
cd my-app
bun install

이제 Tailwind CSS를 설치하고 구성해 보겠습니다.

bun install -D tailwindcss postcss autoprefixer
bunx tailwindcss init -p

Tailwind CSS 구성 파일인 tailwind.config.js가 표시됩니다. 다음 내용을 파일에 복사하세요.

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

CSS 파일(예: src/index.css) 상단에 다음 Tailwind 지시어를 추가하세요.

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

Prettier 설치 및 구성

bun install -D prettier prettier-plugin-tailwindcss

프로젝트 루트에 더 예쁜 구성 파일을 만들고 prettier-plugin-tailwindcss 플러그인을 구성 파일에 추가합니다. 우리는 .prettierrc를 사용합니다. 여기에서 허용되는 다른 더 예쁜 구성 파일 형식을 확인할 수 있습니다.

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

이제 설정을 테스트하고 src/App.tsx 파일을 수정한 후 저장해 보겠습니다.

import { useState } from "react";
import "./App.css";

const App = () => {
  const [count, setCount] = useState(0);

  return (
    
      

         setCount((count) => count   1)}
        >
          Count is {count}
        
      
    >
  );
};

export default App;

결과:

import { useState } from "react";
import "./App.css";

const App = () => {
  const [count, setCount] = useState(0);

  return (
    
      

         setCount((count) => count   1)}
        >
          Count is {count}
        
      
    >
  );
};

export default App;

기존 Tailwind CSS 프로젝트에서 prettier-plugin-tailwindcss 설정

프로젝트에 이미 Prettier가 설정되어 있는 경우 prettier-plugin-tailwindcss 플러그인을 통합하는 것은 간단합니다. 플러그인을 설치하고 구성하기만 하면 됩니다. Prettier가 아직 설치되지 않은 경우 플러그인과 함께 설정해야 합니다.

기존에 더 예쁜 설정이 있는 프로젝트의 경우 다음을 실행하세요.

bun add -D prettier-plugin-tailwindcss

기존에 더 예쁜 설정이 없는 프로젝트의 경우 다음을 실행하세요.

bun add -D prettier prettier-plugin-tailwindcss

기존 Prettier 구성에 플러그인을 추가하세요. 기존 Prettier 구성이 없으면 프로젝트 루트에 .prettierrc 파일을 만듭니다. 그런 다음 다음을 추가합니다.

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

Tailwind CSS 클래스를 사용하여 파일을 변경하여 Prettier가 올바르게 작동하는지 확인하세요. 파일을 저장하고 Tailwind CSS 클래스가 자동으로 정렬되는지 확인하세요.

결론

prettier-plugin-tailwindcss를 신규 및 기존 Tailwind CSS 프로젝트에 통합하면 일관되고 체계적인 클래스 정렬을 보장하여 개발 작업 흐름이 향상됩니다. 새 프로젝트의 경우 Prettier와 플러그인을 동시에 설정하여 초기 구성을 간소화할 수 있습니다. 기존 프로젝트의 경우 기존 Prettier 설정에 플러그인을 추가하거나 Prettier가 아직 구성되지 않은 경우 Prettier와 플러그인을 모두 설치하세요.

비표준 속성의 클래스 정렬과 같은 추가 구성 옵션을 보려면 prettier-plugin-tailwindcss 문서를 방문하세요.