cant89/claxed

Classes with the same style of Styled-Components 🚀
View Demo · Report Bug · Request Feature

About The Project

The idea is born with the usage of tailwind CSS, classes framework is very helpful for giving us all the sizes, colors, spacings but sometimes can be messy if you type your classes inside the component and not to mention when you want a conditional class based on the props 💆‍♂️

With this syntax heavily inspired by styled-components, we can keep our DOM a little cleaner with some utility like props interpolation inside the template string.

Installation

npm install claxed

yarn add claxed

Usage

If you know styled-components this should be familiar to you, is the same syntax but all that you type in a template string will go in the class of the component

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 value are stripped from the output

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

Fork the Project
Create your Feature Branch (git checkout -b feature/AmazingFeature)
Commit your Changes (git commit -m 'Add some AmazingFeature')
Push to the Branch (git push origin feature/AmazingFeature)
Open a Pull Request

FAQ

Why if i override a class doesn't work sometimes?

This happens because is not important where you declared a class, but is the ordering in declaration of the lib that gives it the priority

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Tommaso Poletti - @Tomma5o

Project Link: https://github.com/tomma5o/claxed

cant89 / claxed