Tailwind CSS & Radix UI

Features

• Radix Primitivesを使用した、アクセシビリティ完全なコンポーネントです。
• ButtonやInputなど、Radix以外のコンポーネントも含まれています。
• コンポーネントは、あらかじめスタイルが設定されています。スタイルはTailwindで簡単に上書きできます（PSUIはtw-mergeを使用しています）。
• セマンティックカラーシステムを内蔵しています。すべてのプロジェクトで同じセマンティックカラーを使用できます。
• Tailwindプラグインで、tailwind.config.jsをすっきりとした状態に保つことができます。
• Tree-shakable。バンドルサイズを気にすることなく、名前付きインポートを使用できます！

Installation

もっと知りたい場合は公式ドキュメントを参照してください。

Getting Started / Introduction - Docs ⋅ PSUI

1. pnpm add @x7ddf74479jn5/psuiとpnpm add -D @x7ddf74479jn5/tw-plugin-psuiを実行します。
2. tailwind.config.jsを修正し、インクルードします：
   • "./node_modules/@x7ddf74479jn5/psui/dist/**/*.{js,mjs}"をcontent配列の中へ
   • require("@x7ddf74479jn5/tw-plugin-psui")をplugins配列の中へ

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,md,mdx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@x7ddf74479jn5/psui/dist/**/*.{js,mjs}", // この行は重要です！これを入れないと、PSUIのスタイルがパージされます
    ,
  ],
  plugins: [
    require("@x7ddf74479jn5/tw-plugin-psui"), // 重要！これにより、CSS変数を消費するようにtailwindテーマを拡張します。
  ],
};

3. グローバルcssファイルを編集します。

プリセットテーマ (default, bubblegum, gunmetal) を使う場合は下記のようにインポートします。

@import url("@x7ddf74479jn5/psui/dist/themes/default.css");

@tailwind base;
@tailwind components;
@tailwind utilities;

自分でテーマを作成する場合はConcepts/Colorsを参考にしてください。