diff --git a/.prettierrc b/.prettierrc
index 9607cea..2d979e4 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -6,5 +6,7 @@
   "trailingComma": "all",
   "printWidth": 80,
   "arrowParens": "avoid",
-  "endOfLine": "auto"
+  "endOfLine": "auto",
+
+  "plugins": ["prettier-plugin-tailwindcss"]
 }
diff --git a/package.json b/package.json
index 623acee..f196153 100644
--- a/package.json
+++ b/package.json
@@ -21,9 +21,11 @@
     "@tanstack/react-query": "^5.8.2",
     "@tanstack/react-query-devtools": "^5.8.2",
     "axios": "^1.5.1",
+    "clsx": "^2.0.0",
     "next": "13.5.4",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "tailwind-merge": "^2.0.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.2.0",
@@ -46,6 +48,7 @@
     "lint-staged": "^15.1.0",
     "postcss": "^8",
     "prettier": "^3.0.3",
+    "prettier-plugin-tailwindcss": "^0.5.7",
     "tailwindcss": "^3",
     "typescript": "^5"
   }
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 88b6895..710b57f 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -135,7 +135,7 @@ export default function Admin() {
         ))}
       </Select>
       {isTeamError && (
-        <div className="text-red-400 text-sm">팀을 다시 선택해주세요!</div>
+        <div className="text-sm text-red-400">팀을 다시 선택해주세요!</div>
       )}
 
       <label htmlFor="leagueName">
diff --git a/src/app/detail/[id]/modify/page.tsx b/src/app/detail/[id]/modify/page.tsx
index 35f30e7..4fde17f 100644
--- a/src/app/detail/[id]/modify/page.tsx
+++ b/src/app/detail/[id]/modify/page.tsx
@@ -93,7 +93,7 @@ export default function ModifyGame() {
 
       <label htmlFor="scoreTime">
         득점 시간
-        <div className="flex justify-center items-center gap-1">
+        <div className="flex items-center justify-center gap-1">
           <Input
             id="scoreTime"
             type="number"
@@ -118,7 +118,7 @@ export default function ModifyGame() {
       </label>
       <button
         type="submit"
-        className="border border-slate-200 rounded-md bg-green-600 text-white py-2 px-4 w-full disabled:opacity-70 disabled:pointer-none"
+        className="disabled:pointer-none w-full rounded-md border border-slate-200 bg-green-600 px-4 py-2 text-white disabled:opacity-70"
       >
         저장하기
       </button>
diff --git a/src/app/detail/[id]/page.tsx b/src/app/detail/[id]/page.tsx
index 7c525ba..7c1335d 100644
--- a/src/app/detail/[id]/page.tsx
+++ b/src/app/detail/[id]/page.tsx
@@ -35,7 +35,7 @@ export default function DetailPage({ params }: { params: { id: string } }) {
       {isLoggedIn && (
         <Link
           href={`/detail/${gameId}/modify`}
-          className="p-2 text-white bg-red-400 border border-red-500 rounded-lg w-fit"
+          className="w-fit rounded-lg border border-red-500 bg-red-400 p-2 text-white"
         >
           수정
         </Link>
diff --git a/src/app/detail/[id]/status/page.tsx b/src/app/detail/[id]/status/page.tsx
index f96175e..2b63cf9 100644
--- a/src/app/detail/[id]/status/page.tsx
+++ b/src/app/detail/[id]/status/page.tsx
@@ -33,7 +33,7 @@ export default function Status() {
       </Select>
       <button
         onClick={updateGameStatus}
-        className="mt-4 border border-slate-200 rounded-md bg-green-600 text-white py-2 px-4 w-full disabled:opacity-70 disabled:pointer-none"
+        className="disabled:pointer-none mt-4 w-full rounded-md border border-slate-200 bg-green-600 px-4 py-2 text-white disabled:opacity-70"
       >
         변경하기
       </button>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2b745a1..a880579 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -28,7 +28,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={`${inter.className} max-w-md m-auto bg-slate-50 p-4`}>
+      <body className={`${inter.className} m-auto max-w-md bg-slate-50 p-4`}>
         <ReactQueryProvider>
           <Header />
           {children}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8bb8505..3495b10 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -52,12 +52,12 @@ const DUMMY_GAME: GameType[] = [
 
 export default function Home() {
   return (
-    <main className="w-full flex flex-col gap-3">
-      <p className="text-xl font-bold text-center my-2">매치</p>
+    <main className="flex w-full flex-col gap-3">
+      <p className="my-2 text-center text-xl font-bold">매치</p>
       <div className="flex flex-col gap-8">
         {DUMMY_GAME.map(game => (
           <Game records={[]} videoId={''} key={game.id} {...game}>
-            <Game.Label className="border-black pb-1 mb-2 border-b-[1px]" />
+            <Game.Label className="mb-2 border-b-[1px] border-black pb-1" />
             <div className="flex items-center">
               <Game.Team teamIndex={1} />
               <Game.Score teamIndex={1} />
diff --git a/src/components/common/Game/GameWrapper.tsx b/src/components/common/Game/GameWrapper.tsx
index ab7b49a..34ab8cc 100644
--- a/src/components/common/Game/GameWrapper.tsx
+++ b/src/components/common/Game/GameWrapper.tsx
@@ -1,6 +1,7 @@
 import { createContext, ReactNode } from 'react';
 
 import { GameDetailType } from '@/types/game';
+import { $ } from '@/utils/core';
 
 type GameProps = GameDetailType & {
   children: ReactNode;
@@ -12,13 +13,13 @@ export const GameContext = createContext<null | GameDetailType>(
 );
 
 export default function GameWrapper({
-  className = '',
+  className,
   children,
   ...props
 }: GameProps) {
   return (
     <GameContext.Provider value={props}>
-      <div className={className}>{children}</div>
+      <div className={$(className)}>{children}</div>
     </GameContext.Provider>
   );
 }
diff --git a/src/components/common/Game/Label.tsx b/src/components/common/Game/Label.tsx
index 5f312a3..d463ff8 100644
--- a/src/components/common/Game/Label.tsx
+++ b/src/components/common/Game/Label.tsx
@@ -1,4 +1,5 @@
 import { useGameContext } from '@/hooks/useGameContext';
+import { $ } from '@/utils/core';
 
 type LabelProps = {
   className?: string;
@@ -7,5 +8,5 @@ type LabelProps = {
 export default function Label({ className }: LabelProps) {
   const { name } = useGameContext();
 
-  return <div className={`${className}`}>{name}</div>;
+  return <div className={$(className)}>{name}</div>;
 }
diff --git a/src/components/common/Game/Score.tsx b/src/components/common/Game/Score.tsx
index 2c64536..dff2e63 100644
--- a/src/components/common/Game/Score.tsx
+++ b/src/components/common/Game/Score.tsx
@@ -1,15 +1,16 @@
 import { useGameContext } from '@/hooks/useGameContext';
+import { $ } from '@/utils/core';
 
 type ScoreProps = {
   teamIndex: number;
   className?: string;
 };
 
-export default function Score({ teamIndex, className = '' }: ScoreProps) {
+export default function Score({ teamIndex, className }: ScoreProps) {
   const { firstTeamScore, secondTeamScore } = useGameContext();
 
   return (
-    <span className={`${className}`}>
+    <span className={$(className)}>
       {teamIndex === 1 ? firstTeamScore : secondTeamScore}
     </span>
   );
diff --git a/src/components/common/Game/Status.tsx b/src/components/common/Game/Status.tsx
index 2827df9..3e0fcff 100644
--- a/src/components/common/Game/Status.tsx
+++ b/src/components/common/Game/Status.tsx
@@ -1,12 +1,13 @@
 import { GAME_STATUS } from '@/constants/gameStatus';
 import { useGameContext } from '@/hooks/useGameContext';
+import { $ } from '@/utils/core';
 
 type StatusProps = {
   className?: string;
 };
 
-export default function Status({ className = '' }: StatusProps) {
+export default function Status({ className }: StatusProps) {
   const { gameStatus } = useGameContext();
 
-  return <div className={`${className}`}>{GAME_STATUS[gameStatus]}</div>;
+  return <div className={$(className)}>{GAME_STATUS[gameStatus]}</div>;
 }
diff --git a/src/components/common/Game/Team.tsx b/src/components/common/Game/Team.tsx
index f888714..0faad5f 100644
--- a/src/components/common/Game/Team.tsx
+++ b/src/components/common/Game/Team.tsx
@@ -1,19 +1,20 @@
 import Image from 'next/image';
 
 import { useGameContext } from '@/hooks/useGameContext';
+import { $ } from '@/utils/core';
 
 type TeamProps = {
   teamIndex: number;
   className?: string;
 };
 
-export default function Team({ teamIndex, className = '' }: TeamProps) {
+export default function Team({ teamIndex, className }: TeamProps) {
   const { firstTeam, secondTeam } = useGameContext();
 
   const targetTeamInfo = teamIndex === 1 ? firstTeam : secondTeam;
 
   return (
-    <div className={`${className}`}>
+    <div className={$(className)}>
       <Image
         width="100"
         height="100"
diff --git a/src/components/common/Input/Input.tsx b/src/components/common/Input/Input.tsx
index eb062b1..4e8f183 100644
--- a/src/components/common/Input/Input.tsx
+++ b/src/components/common/Input/Input.tsx
@@ -1,11 +1,13 @@
 import { InputHTMLAttributes } from 'react';
 
+import { $ } from '@/utils/core';
+
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {}
 
 export default function Input({ className, ...props }: InputProps) {
   return (
     <input
-      className={`block w-full p-2 border rounded-lg ${className}`}
+      className={$('block w-full rounded-lg border p-2', className)}
       {...props}
     />
   );
diff --git a/src/components/common/Select/Select.tsx b/src/components/common/Select/Select.tsx
index 65d0671..798a6ed 100644
--- a/src/components/common/Select/Select.tsx
+++ b/src/components/common/Select/Select.tsx
@@ -1,5 +1,7 @@
 import { ReactNode, SelectHTMLAttributes } from 'react';
 
+import { $ } from '@/utils/core';
+
 interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
   children?: ReactNode;
 }
@@ -10,7 +12,7 @@ export default function Select({
   ...props
 }: SelectProps) {
   return (
-    <select {...props} className="block w-full p-2 border rounded-lg">
+    <select {...props} className={$('block w-full rounded-lg border p-2')}>
       {placeholder && (
         <option value="0" disabled hidden>
           {placeholder}
diff --git a/src/components/detail/CommentItem.tsx b/src/components/detail/CommentItem.tsx
index 8014102..30a8e4b 100644
--- a/src/components/detail/CommentItem.tsx
+++ b/src/components/detail/CommentItem.tsx
@@ -24,9 +24,9 @@ export const CommentItem = ({
     await postBlockComment(id);
   };
   return (
-    <li className="flex justify-start items-center gap-4">
+    <li className="flex items-center justify-start gap-4">
       <div
-        className={`p-3 rounded-lg shadow-md ${
+        className={`rounded-lg p-3 shadow-md ${
           isBlocked ? 'bg-gray-200' : 'bg-white'
         }`}
       >
@@ -47,7 +47,7 @@ export const CommentItem = ({
       {!isBlocked && isLoggedIn && (
         <button
           type="button"
-          className="text-red-500 min-w-max min-h-max p-[0.1rem] rounded-md border-2 border-red-500 bg-red-100 flex justify-center items-center"
+          className="flex min-h-max min-w-max items-center justify-center rounded-md border-2 border-red-500 bg-red-100 p-[0.1rem] text-red-500"
           onClick={handleBlockComment}
         >
           <Cross2Icon />
diff --git a/src/components/detail/CommentList.tsx b/src/components/detail/CommentList.tsx
index 1bc58f3..2172d33 100644
--- a/src/components/detail/CommentList.tsx
+++ b/src/components/detail/CommentList.tsx
@@ -39,7 +39,7 @@ export default function CommentList({ gameId }: { gameId: number }) {
           value={inputContent}
           onChange={e => setInputContent(e.target.value)}
           placeholder="댓글을 작성하세요"
-          className="w-full p-4 border-2 rounded-lg border-slate-400"
+          className="w-full rounded-lg border-2 border-slate-400 p-4"
         />
         <div className="flex items-center justify-between">
           <span className="text-xs text-gray-400">
@@ -49,7 +49,7 @@ export default function CommentList({ gameId }: { gameId: number }) {
           </span>
           <button
             type="submit"
-            className="float-right px-4 py-2 text-white bg-green-600 border rounded-lg border-slate-200 disabled:opacity-70 disabled:pointer-none"
+            className="disabled:pointer-none float-right rounded-lg border border-slate-200 bg-green-600 px-4 py-2 text-white disabled:opacity-70"
             disabled={inputContent.length == 0}
           >
             등록
diff --git a/src/components/detail/GameInfo.tsx b/src/components/detail/GameInfo.tsx
index a7f8d33..7a2756d 100644
--- a/src/components/detail/GameInfo.tsx
+++ b/src/components/detail/GameInfo.tsx
@@ -3,7 +3,7 @@ import { GameDetailType } from '@/types/game';
 
 export default function GameInfo({ game }: { game: GameDetailType }) {
   return (
-    <div className="flex flex-col gap-1 justify-center px-2 py-8 bg-white rounded-md">
+    <div className="flex flex-col justify-center gap-1 rounded-md bg-white px-2 py-8">
       <Game {...game}>
         <Game.Team teamIndex={1} />
         <Game.Score teamIndex={1} />
diff --git a/src/components/detail/Record.tsx b/src/components/detail/Record.tsx
index 2dd4760..f911c63 100644
--- a/src/components/detail/Record.tsx
+++ b/src/components/detail/Record.tsx
@@ -5,13 +5,13 @@ export const Record = ({ id, playerName, score, scoredAt }: GameRecordType) => {
   const { hour, minute } = useDate(scoredAt);
   return (
     <li
-      className="flex gap-4 items-center justify-center p-4 rounded-lg shadow-md bg-white"
+      className="flex items-center justify-center gap-4 rounded-lg bg-white p-4 shadow-md"
       key={id}
     >
-      <span className="text-lg text-center">
+      <span className="text-center text-lg">
         {playerName} 선수 {score}골 득점!
       </span>
-      <span className="text-xs opacity-50 text-center">
+      <span className="text-center text-xs opacity-50">
         {hour}시 {minute}분
       </span>
     </li>
diff --git a/src/components/home/GameItem/index.tsx b/src/components/home/GameItem/index.tsx
index 8ed21df..6bf6c30 100644
--- a/src/components/home/GameItem/index.tsx
+++ b/src/components/home/GameItem/index.tsx
@@ -8,7 +8,7 @@ export default function GameItem(props: GameDetailType) {
     <li key={props.id}>
       <Link
         href={`/detail/${props.id}`}
-        className="flex flex-col gap-1 justify-center p-2 rounded-lg shadow-md bg-white"
+        className="flex flex-col justify-center gap-1 rounded-lg bg-white p-2 shadow-md"
       >
         <Game {...props}>
           <Game.Label />
diff --git a/src/components/home/GameList/GameWithTimeStamp.tsx b/src/components/home/GameList/GameWithTimeStamp.tsx
index d400d17..0e2a41d 100644
--- a/src/components/home/GameList/GameWithTimeStamp.tsx
+++ b/src/components/home/GameList/GameWithTimeStamp.tsx
@@ -14,7 +14,7 @@ export default function GameWithTimeStamp({ data }: GameListProps) {
         <li key={game.id}>
           <Link
             href={`/detail/${game.id}`}
-            className="flex flex-col gap-1 justify-center p-2 rounded-lg shadow-md bg-white"
+            className="flex flex-col justify-center gap-1 rounded-lg bg-white p-2 shadow-md"
           >
             <Game records={[]} videoId="" {...game}>
               <Game.Label />
diff --git a/src/utils/core.ts b/src/utils/core.ts
new file mode 100644
index 0000000..abdcbea
--- /dev/null
+++ b/src/utils/core.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export const $ = (...inputs: ClassValue[]) => {
+  return twMerge(clsx(inputs));
+};
diff --git a/yarn.lock b/yarn.lock
index 108b061..6da0387 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -41,7 +41,7 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.23.2":
+"@babel/runtime@^7.23.1", "@babel/runtime@^7.23.2":
   version "7.23.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885"
   integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==
@@ -1294,6 +1294,11 @@ cliui@^8.0.1:
     strip-ansi "^6.0.1"
     wrap-ansi "^7.0.0"
 
+clsx@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b"
+  integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -3562,6 +3567,11 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
+prettier-plugin-tailwindcss@^0.5.7:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.7.tgz#d05dc42c6f2167e3bf2c20e9f71a1fff4232b5d9"
+  integrity sha512-4v6uESAgwCni6YF6DwJlRaDjg9Z+al5zM4JfngcazMy4WEf/XkPS5TEQjbD+DZ5iNuG6RrKQLa/HuX2SYzC3kQ==
+
 prettier@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.3.tgz#432a51f7ba422d1469096c0fdc28e235db8f9643"
@@ -4118,6 +4128,13 @@ synckit@^0.8.5:
     "@pkgr/utils" "^2.3.1"
     tslib "^2.5.0"
 
+tailwind-merge@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.0.0.tgz#a0f3a8c874ebae5feec5595614d08245a5f88a39"
+  integrity sha512-WO8qghn9yhsldLSg80au+3/gY9E4hFxIvQ3qOmlpXnqpDKoMruKfi/56BbbMg6fHTQJ9QD3cc79PoWqlaQE4rw==
+  dependencies:
+    "@babel/runtime" "^7.23.1"
+
 tailwindcss@^3:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.3.tgz#90da807393a2859189e48e9e7000e6880a736daf"
