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