claxed

具有相同樣式組件風格的課程
查看演示·報告錯誤·請求功能

關於項目

這個想法是在使用Tailwind CSS時誕生的，這是一個非常有用的類FrameWrok，為我們提供了所有CSS課程的尺寸，顏色，間距。但是，如果您在組件中有很多類要輸入的類，可能會很混亂。更不用說當您想要基於道具的有條件課程時？ ‍♂️

借助受樣式組件的磁體，重大啟發，我們可以在模板字符串中的一些公用事業（例如道具插值）的幫助下保持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特異性相關的claxs類鍵入的順序？

否。 Claxed僅負責將CSS類組合併將結果放在組件的HTML“類屬性中。如果您有任何特異性問題，則應查看CSS文件中如何定義類

執照

根據MIT許可分發。有關更多信息，請參見LICENSE 。

接觸

Tommaso Poletti- @tomma5o

項目鏈接：https：//github.com/tomma5o/claxed