feat/tailwind に移行する

[anko9801]

User description

fix: #139

---

PR Type

enhancement, dependencies

---

Description

• Tailwind CSSを導入し、WindiCSSを削除しました。
• 各コンポーネントとページでTailwind CSSクラスを適用しました。
• vite.config.tsからWindiCSSプラグインを削除しました。
• tailwind.config.jsを追加し、カスタムカラーとタイポグラフィプラグインを定義しました。
• postcss.config.jsを追加し、Tailwind CSSとautoprefixerを設定しました。
• package.jsonを更新し、Tailwind CSS関連の依存関係を追加し、WindiCSS関連の依存関係を削除しました。
• MSWのバージョンを2.4.1に更新しました。

---

Changes walkthrough 📝

	Relevant files
Enhancement	20 files TransactionFilters.vue Migrate TransactionFilters to Tailwind CSS                              src/components/transactions/TransactionFilters.vue Tailwind CSS classes applied to elements. Adjusted width classes for buttons and divs. +6/-6      TransactionItem.vue Migrate TransactionItem to Tailwind CSS                                    src/components/transactions/TransactionItem.vue Tailwind CSS classes applied to elements. Adjusted width classes for divs. +6/-6      PaginationBar.vue Update PaginationBar with Tailwind CSS                                      src/components/shared/PaginationBar.vue - Adjusted width classes for pagination buttons. +2/-2      GroupsPage.vue Apply Tailwind CSS to GroupsPage                                                  src/pages/GroupsPage.vue - Updated minimum width using Tailwind CSS. +2/-2      TransactionsPage.vue Apply Tailwind CSS to TransactionsPage                                      src/pages/TransactionsPage.vue - Updated minimum width using Tailwind CSS. +2/-2      RequestsPage.vue Apply Tailwind CSS to RequestsPage                                              src/pages/RequestsPage.vue - Updated minimum width using Tailwind CSS. +2/-2      InputSelectMultiple.vue Update InputSelectMultiple with Tailwind CSS                          src/components/shared/InputSelectMultiple.vue - Adjusted width calculation for input select. +2/-2      RequestFilters.vue Update RequestFilters with Tailwind CSS                                    src/components/requests/RequestFilters.vue - Adjusted margin-left for span elements. +2/-2      InputSelectSingle.vue Update InputSelectSingle with Tailwind CSS                              src/components/shared/InputSelectSingle.vue - Adjusted width calculation for input select. +2/-2      NewTransactionPage.vue Apply Tailwind CSS to NewTransactionPage                                  src/pages/NewTransactionPage.vue - Updated minimum width using Tailwind CSS. +1/-1      AdminPage.vue Apply Tailwind CSS to AdminPage                                                    src/pages/AdminPage.vue - Updated minimum width using Tailwind CSS. +1/-1      RequestDetailPage.vue Update RequestDetailPage with Tailwind CSS                              src/pages/RequestDetailPage.vue - Adjusted height for div using Tailwind CSS. +1/-1      NewRequestPage.vue Apply Tailwind CSS to NewRequestPage                                          src/pages/NewRequestPage.vue - Updated minimum width using Tailwind CSS. +1/-1      NewGroupPage.vue Apply Tailwind CSS to NewGroupPage                                              src/pages/NewGroupPage.vue - Updated minimum width using Tailwind CSS. +1/-1      RequestContent.vue Update RequestContent with Tailwind CSS                                    src/components/requestDetail/RequestContent.vue - Adjusted margin-left for div using Tailwind CSS. +1/-1      CommentLog.vue Update CommentLog with Tailwind CSS                                            src/components/requestDetail/CommentLog.vue - Adjusted margin-left for div using Tailwind CSS. +1/-1      PageLink.vue Simplify PageLink component                                                            src/components/shared/PageLink.vue - Removed block class from router-link. +1/-1      tailwind.config.js Add Tailwind CSS configuration                                                      tailwind.config.js Added Tailwind CSS configuration file. Defined custom colors and typography plugin. +32/-0    postcss.config.js Add PostCSS configuration for Tailwind CSS                              postcss.config.js - Added PostCSS configuration with Tailwind CSS and autoprefixer. +6/-0      main.css Integrate Tailwind CSS into main styles                                    src/styles/main.css - Added Tailwind CSS base, components, and utilities. +4/-0
Dependencies	3 files vite.config.ts Remove WindiCSS from Vite configuration                                    vite.config.ts - Removed WindiCSS plugin. +1/-2      mockServiceWorker.js Update MSW version in mockServiceWorker                                    public/mockServiceWorker.js - Updated MSW package version. +1/-1      package.json Update package.json for Tailwind CSS migration                      package.json Added Tailwind CSS and related dependencies. Removed WindiCSS and related dependencies. +5/-3
Additional files (token-limit)	1 files package-lock.json ...                                                                                                            package-lock.json ... +1604/-162

---

💡 PR-Agent usage: Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[github-actions[bot]]

PR Reviewer Guide 🔍

(Review updated until commit https://github.com/traPtitech/Jomon-UI/commit/1506e22b1bf710aa0272a58229e76fecd07e85de)

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Key issues to review Tailwind CSS Migration Tailwind CSSクラスの適用が正しく行われているか確認が必要です。特に、新しいクラス名が既存のスタイルと競合しないか検証する必要があります。 Width Consistency `w-72`への変更が適切かどうか確認してください。以前の`w-70`からの変更が意図した通りのビジュアル変更を引き起こしているかレビューが必要です。

[reiroop]

/review

[reiroop]

/improve

[github-actions[bot]]

PR Code Suggestions ✨

Category	Suggestion	Score
Possible bug	props.classが空の場合に不適切なクラス名が生成されないように修正します。 ___ ** calcWidth関数の戻り値にw-72を追加する際、props.classが空文字列の場合に不適切なクラス名が生成される可能性があります。これを防ぐために、props.classが空でない場合のみw-72を追加するように修正してください。** [src/components/shared/InputSelectMultiple.vue [244]](https://github.com/traPtitech/Jomon-UI/pull/290/files#diff-c0a069c4932d67da14cc3d49da3dc089798d5dda6d0892a12dc8f523682e3331R244-R244) ```diff -return `${props.class} w-72` +return props.class ? `${props.class} w-72` : 'w-72' ``` Suggestion importance[1-10]: 9 Why: This suggestion addresses a potential bug where an inappropriate class name could be generated if `props.class` is an empty string. The proposed change ensures that `w-72` is only added when `props.class` is not empty, which is a crucial fix for maintaining correct styling.	9
Enhancement	Tailwind CSSのグループ化されたクラスを正しく使用するために修正します。 ___ ** タグ内のクラス名[&>*]:px-2が正しく機能していない可能性があります。Tailwind CSSのグループ化されたクラスを使用する場合は、正しい構文を使用してください。例えば、children:*のように修正することをお勧めします。** [src/components/transactions/TransactionFilters.vue [80]](https://github.com/traPtitech/Jomon-UI/pull/290/files#diff-880cad5beac402e0fa97e1c9dcf583133275e5196dcdf010ebe84b14f7415d03R80-R80) ```diff - + ``` Suggestion importance[1-10]: 7 Why: The suggestion improves the use of Tailwind CSS by recommending a more standard syntax for grouped classes. While not critical, it enhances code readability and ensures consistent styling behavior.	7

[github-actions[bot]]

Persistent review updated to latest commit https://github.com/traPtitech/Jomon-UI/commit/1506e22b1bf710aa0272a58229e76fecd07e85de

[reiroop]

LGTMです 一応Code Suggestionsを見ていただきたいのと、僕だとわからないことも多いのでめふもさんにもレビューをお願いしたいかもです