모노레포의 공통 ui 컴포넌트에 tailwind 적용 안될 때 (turborepo, tawilwind)

이전 포스팅에서 공통된 tailwind-config을 생성하여 apps/web에 적용시키는 것을 학습하였다.

똑같은 방식으로 packages/ui에 컴포넌트를 생성한 후 tailwind 들을 적용시킨 뒤 webs 에서 사용할려고 하는데 공통 컴포넌트에 작성해두었던 tailwind가 먹히지 않는 사례가 생겼다.

packages/ui 에 tailwind config도 똑같이 적용시켰는데 안되는 것에 대해 여러 삽질을 해본 결과 

apps/web/tailwind.config.ts의 content에 /packages/ui에 있는 요소들에게도 tailwind를 입혀줘야한다고 설정하지 않아서였다.

즉, 

// apps/web/tailwind.config.js

content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  
  위의 내용이 아니라
  
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "../../packages/ui/**/*{.js,.ts,.jsx,.tsx}",
  ],
  
  이 내용을 입혀줘야 했다는 것

이 공통 컴포넌트는 다른 프로젝트에서도 쓰일테니 packages/tailwind-config/index.ts에 추가해주었다.

// packages/tailwind-config/index.ts

import type { Config } from "tailwindcss";
import animate from "tailwindcss-animate";

const config: Omit<Config, "content"> = {
  darkMode: ["class"],
		//추가 된 내용
  content: ["../../packages/ui/components/**/*{.js,.ts,.jsx,.tsx}"],
  theme: {
    extend: {
      width: {
        zeroGym: "24rem",
      },

      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: `var(--radius)`,
        md: `calc(var(--radius) - 2px)`,
        sm: "calc(var(--radius) - 4px)",
      },
    },
  },
  plugins: [animate],
};

export default config;

이후 /apps/web 의 tailwind.config.ts를 아래처럼 수정해줌

import config from "@repo/tailwind-config";

/** @type {import('tailwindcss').Config} */
export default {
  ...config,
  content: [
    ...config.content,		// 추가 된 내용
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      ...config.theme.extend,
    },
  },
  plugins: [],
};

아래는 적용 되는지만을 보여주기 위한 결과물 

// packages/ui/button.tsx

const Button = () => {
  return (
    <button className="bg-red-500 px-2 text-white">
      공통 컴포넌트의 button
    </button>
  );
};

Button.displayName = "Button";

export { Button };



// apps/web/page.tsx
"use client";
import { Button } from "@repo/ui";

export default function Home() {
  return (
    <div className="space-y-4">
      <Button />
      <div className="bg-black text-white">/apps/web page.tsx의 내용</div>
    </div>
  );
}

 

잘 먹혔당