[Tailwind CSS] tailwind.config.ts: 클래스 커스터마이징 및 플러그인 설정

tailwind.config.ts 파일 항목

 

content

: Tailwind 스타일을 적용할 파일들의 경로를 지정한다.

• 지정된 파일들에서 사용된 클래스만 찾아서 최적화된 CSS를 생성한다.

 

theme

: Tailwind의 기본 스타일을 설정하거나 확장할 수 있다.

• extend를 사용하면 새로운 스타일을 추가할 수 있다.

 

plugins

: Tailwind CSS의 기능을 확장하는 플러그인을 추가할 수 있다.

• 폼 스타일링 등을 위한 플러그인 등을 추가할 수 있다.

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ], 
  // ./pages, ./components, ./app 폴더 내의 파일에서 클래스를 찾음
  
  theme: {
    extend: {
    // ...
    },
  },
  
  plugins: [],
};
export default config;

 

---

JIT (Just-in-Time) 컴파일러

: 실시간으로 필요한 CSS만 생성하는 방식

• 개발자가 저장할 때마다 tailwind.config.ts 파일의 content 속성에 지정된 모든 파일을 읽고, 그 파일에서 사용된 클래스들을 읽어서 CSS 파일로 변환한다.
• 장점
  
  • 파일 크기 최적화: 사용되지 않는 CSS를 제외하고 필요한 클래스만을 포함시키므로, 최종적으로 생성되는 CSS 파일의 크기가 작고 성능이 개선된다.
  • 빠른 반영: CSS 변경사항이 즉시 반영되므로, 개발 중 실시간으로 스타일을 빠르게 수정하고 테스트할 수 있다.
  • 유연한 커스터마이징: extend와 arbitrary value 기능을 활용해 기본 클래스 외에도 사용자가 원하는 스타일을 쉽게 추가할 수 있다.

 

 

 

임의 값 지정하기(Arbitrary Value)

• Tailwind CSS는 사용자가 지정한 값을 기반으로 클래스도 생성할 수 있다.
• 클래스명 안에 값을 직접 넣으면, JIT 컴파일러가 읽고 해당 CSS 클래스를 생성하여 세밀한 커스터마이징이 가능하다.

<input className="w-[10px] bg-[#12432]" />

 

 

 

 

커스텀 클래스 (Tailwind Configuration)

• tailwind.config.ts 파일의 theme의 extend 속성에서 커스텀 class를 정의할 수 있다.
  
  • theme: Tailwind의 기본 설정을 정의할 때 사용된다. (색상, 폰트, 간격 등을 설정)
  • extend: 기본 설정을 확장할 때 사용된다. (새로운 색상이나 간격 등을 추가)

// tailwind.config.ts
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  
  theme: {
    extend: {
      margin: {
        tomato: "120px", // 커스텀 클래스
      },
      borderRadius: {
        "sexy-name": "11.11px", // 커스텀 클래스
      },
    },
  },
  
  plugins: [],
};
export default config;

 

---

Tailwind CSS 플러그인

Tailwind CSS 플러그인은 tailwind.config.ts 파일의 plugins 배열에 추가하여 사용한다. 

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  
  theme: {
    extend: {},
  },
  
  plugins: [
    // tailwindcss/forms 플러그인 추가
    require('@tailwindcss/forms'),
  ],
};

export default config;

 

 

 

1. tailwindcss/forms

form 요소의 기본 reset을 제공하고, form 요소들을 쉽게 재정의할 수 있는 유틸리티를 제공하는 플러그인

GitHub - tailwindlabs/tailwindcss-forms: A plugin that provides a basic reset for form styles that makes form elements easy to o

 

1. 라이브러리 설치

npm install -D @tailwindcss/forms

 

 

2. tailwind.config.ts 파일에 플러그인 추가

module.exports = {
   plugins: [require("@tailwindcss/forms")],
}

 

 

 

 

2. daisyUI

Tailwind CSS용 가장 인기있는 컴포넌트 라이브러리

• 버튼, 카드, 모달 등 다양한 UI 컴포넌트를 쉽게 사용할 수 있게 해준다.

daisyUI — Tailwind CSS Components ( version 4 update is here )

 

1. 라이브러리 설치

npm i -D daisyui@latest

 

 

2. tailwind.config.ts 파일에 플러그인 추가

module.exports = {
   plugins: [require("daisyui")],
}

 

 

 

 

3. Official Plugins

• Tailwind CSS의 공식 플러그인은 npm을 통해 설치한 후, tailwind.config.ts 파일에 추가하여 사용할 수 있다. 

Plugins - Tailwind CSS