Zenn
Closed4

shadcn/uiのCSS Modules対応をCopilot editsにやってもらう

GitHub Copilot
shadcn/ui
fu2hitofu2hito

動機

  • kintoneのカスタマイズでshadcn/uiが利用できるとうれしい
  • kintoneカスタマイズにtailwindcss適用がうまくいかない
    • 適用できるのであればわざわざ下記を行う必要はない

はじめに

Hidden comment
fu2hitofu2hito

指示

以下をCopilot editsで実行

./src/components/ui以下のshadcn/uiコンポーネントをTailwind CSSからCSS Modulesに変換してください。
以下の点に注意してください：

- コンポーネントのバリアント構造を維持すること
- cvaの実装をCSS Modules向けに更新すること
- cn関数からtwMergeを取り除き、clsxのみを使用すること
- TailwindクラスをCSS Moduleの適切なCSSプロパティに変換すること
- テーマ変数を使用して一貫したデザインシステムを保持すること

**注意点**

* 変換する際は[ガイドライン](./shadcn-in-cssmodules-without-tailwindcss.md)の「Tailwind to CSS Conversion Reference」セクションを参照すると、クラス変換の一貫性が確保できます
* コンポーネントの構造とバリアントシステムを維持することが重要です
* CSS変数を活用してテーマシステムを保持することを忘れないでください
* Biomeなどのリンターを使用している場合は、CSS Modules用の設定を追加してください
* 非標準のCSS記法（ring, ring-colorなど）は標準のCSSプロパティに適切に変換してください
fu2hitofu2hito

結果

  • うまくいったように見える。
  • 新しくコンポーネントを追加した後は同じように変換してもらえばよい
このスクラップは18日前にクローズされました
ログインするとコメントできます