claxed

同じスタイルのスタイルのコンポーネントを持つクラス
デモの表示バグのレポート・リクエスト機能

プロジェクトについて

このアイデアは、Tailwind CSSを使用している間に生まれます。これは、サイズ、色、間隔のすべてのCSSクラスを提供する非常に役立つクラスFrameWrokです。ただし、コンポーネント内に入力するクラスが多数ある場合は、乱雑になる可能性があります。そして、あなたが小道具に基づいて条件付きクラスが必要なときは言うまでもありませんか？

スタイルのコンポーネントに重度に触発されたクラックスを使用すると、テンプレート文字列内のプロップ補間などの一部のユーティリティの助けを借りて、DOMを少しきれいに保つことができます。

インストール

npm install claxed

または

yarn add claxed

使用法

スタイルのコンポーネントを知っていれば、この構文はすでに馴染みがあるかもしれません。テンプレート内で入力するものはすべて、コンポーネントのHTML class属性に印刷されます。次の例では、すべての行はCSSクラスです。

 const Button = claxed . button `
  px-3
  py-2
` ;

const ButtonRed = claxed ( Button ) `
  ${ ( { border } ) => border && 'border' }
  text-red-500
` ;

const App = ( ) => (
  < div >
    < Button > Click me </ Button >
    < ButtonRed border > Click me </ ButtonRed >
  </ div >
) ;

// Note: All the falsy values are stripped from the output 

ロードマップ

提案された機能（および既知の問題）のリストについては、オープンな問題を参照してください。

貢献

貢献は、オープンソースコミュニティを学び、インスピレーションを与え、創造する驚くべき場所の形にするものです。あなたがする貢献はどんな貢献も大歓迎です。

1. プロジェクトをフォークします
2. 機能ブランチを作成します（ git checkout -b feature/AmazingFeature ）
3. あなたの変更をコミットします（ git commit -m 'Add some AmazingFeature' ）
4. ブランチへのプッシュ（ git push origin feature/AmazingFeature ）
5. プルリクエストを開きます

よくある質問

CSSの特異性に関連するクラスを入力したクラスを入力する順序はありますか？

No. Claxedは、CSSクラスを組み合わせて、結果をコンポーネントのHTML「クラス」属性に配置する責任のみを担当します。特異性の問題がある場合は、CSSファイルでクラスがどのように定義されているかを確認する必要があります

ライセンス

MITライセンスの下で配布されます。詳細については、 LICENSE参照してください。

接触

Tommaso Poletti - @tomma5o

プロジェクトリンク：https：//github.com/tomma5o/claxed