From 277c5b13bc3bce8d6398c56caa625b7fa146b005 Mon Sep 17 00:00:00 2001
From: wnhlee <2wheeh@gmail.com>
Date: Wed, 24 Jan 2024 17:23:19 +0900
Subject: [PATCH] feat: add packages for tailwindcss usablity

---
 ui/.prettierrc                    |  4 ++-
 ui/package.json                   |  3 +-
 ui/packages/mr-c.app/package.json |  1 +
 ui/yarn.lock                      | 60 +++++++++++++++++++++++++++++++
 4 files changed, 66 insertions(+), 2 deletions(-)

diff --git a/ui/.prettierrc b/ui/.prettierrc
index a2d35aeb2..1f1557384 100644
--- a/ui/.prettierrc
+++ b/ui/.prettierrc
@@ -3,5 +3,7 @@
   "semi": true,
   "trailingComma": "es5",
   "singleQuote": true,
-  "printWidth": 100
+  "printWidth": 100,
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindFunctions": ["clsx"]
 }
diff --git a/ui/package.json b/ui/package.json
index 069bed034..d4da7183c 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -27,6 +27,7 @@
   "devDependencies": {
     "husky": "^8.0.0",
     "lint-staged": "^14.0.1",
-    "prettier": "^3.0.3"
+    "prettier": "^3.0.3",
+    "prettier-plugin-tailwindcss": "^0.5.11"
   }
 }
diff --git a/ui/packages/mr-c.app/package.json b/ui/packages/mr-c.app/package.json
index 9bfa9cf32..859441467 100644
--- a/ui/packages/mr-c.app/package.json
+++ b/ui/packages/mr-c.app/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@mrc/common-components": "workspace:*",
     "@mrc/common-utils": "workspace:*",
+    "clsx": "^2.1.0",
     "next": "^14.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
diff --git a/ui/yarn.lock b/ui/yarn.lock
index ec799f44f..e5b814cbf 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -2290,6 +2290,7 @@ __metadata:
     "@typescript-eslint/eslint-plugin": ^6.7.3
     "@typescript-eslint/parser": ^6.7.3
     autoprefixer: ^10.4.16
+    clsx: ^2.1.0
     eslint: ^8.51.0
     eslint-config-next: ^13.5.5
     jest: ^29.7.0
@@ -6298,6 +6299,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clsx@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "clsx@npm:2.1.0"
+  checksum: 43fefc29b6b49c9476fbce4f8b1cc75c27b67747738e598e6651dd40d63692135dc60b18fa1c5b78a2a9ba8ae6fd2055a068924b94e20b42039bd53b78b98e1d
+  languageName: node
+  linkType: hard
+
 "co@npm:^4.6.0":
   version: 4.6.0
   resolution: "co@npm:4.6.0"
@@ -10867,6 +10875,7 @@ __metadata:
     husky: ^8.0.0
     lint-staged: ^14.0.1
     prettier: ^3.0.3
+    prettier-plugin-tailwindcss: ^0.5.11
   languageName: unknown
   linkType: soft
 
@@ -11797,6 +11806,57 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prettier-plugin-tailwindcss@npm:^0.5.11":
+  version: 0.5.11
+  resolution: "prettier-plugin-tailwindcss@npm:0.5.11"
+  peerDependencies:
+    "@ianvs/prettier-plugin-sort-imports": "*"
+    "@prettier/plugin-pug": "*"
+    "@shopify/prettier-plugin-liquid": "*"
+    "@trivago/prettier-plugin-sort-imports": "*"
+    prettier: ^3.0
+    prettier-plugin-astro: "*"
+    prettier-plugin-css-order: "*"
+    prettier-plugin-import-sort: "*"
+    prettier-plugin-jsdoc: "*"
+    prettier-plugin-marko: "*"
+    prettier-plugin-organize-attributes: "*"
+    prettier-plugin-organize-imports: "*"
+    prettier-plugin-style-order: "*"
+    prettier-plugin-svelte: "*"
+  peerDependenciesMeta:
+    "@ianvs/prettier-plugin-sort-imports":
+      optional: true
+    "@prettier/plugin-pug":
+      optional: true
+    "@shopify/prettier-plugin-liquid":
+      optional: true
+    "@trivago/prettier-plugin-sort-imports":
+      optional: true
+    prettier-plugin-astro:
+      optional: true
+    prettier-plugin-css-order:
+      optional: true
+    prettier-plugin-import-sort:
+      optional: true
+    prettier-plugin-jsdoc:
+      optional: true
+    prettier-plugin-marko:
+      optional: true
+    prettier-plugin-organize-attributes:
+      optional: true
+    prettier-plugin-organize-imports:
+      optional: true
+    prettier-plugin-style-order:
+      optional: true
+    prettier-plugin-svelte:
+      optional: true
+    prettier-plugin-twig-melody:
+      optional: true
+  checksum: 450646db10dbcec76fe6be7bfc85e2e3c6bd1a6c9026637fc9c7f9a0882d8adf6b6fb589be6d24e6a4868772d44b55278a3a39760aa9feee2cf281db9215c0f6
+  languageName: node
+  linkType: hard
+
 "prettier@npm:^2.8.0":
   version: 2.8.8
   resolution: "prettier@npm:2.8.8"