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

About The Project

The idea is born while using tailwind CSS, which is a very helpful classes framewrok that gives us all the CSS classes for sizes, colors, spacings. However it can be messy if you have a lot of classes to type inside the component. And not to mention when you want a conditional class based on a prop 💆‍♂️

With claxed, heavily inspired by styled-components, we can keep our DOM a little bit cleaner with the help of some utilities like props interpolation inside the template string.

Installation

npm install claxed

or

yarn add claxed

Usage

If you know styled-components this syntax might be already familiar to you. Whatever you type within the template string will be printed in the html class attribute of the component. In the following example every row is a CSS class.

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

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 form where to learn, be inspired, and create. Any contributions you make are greatly appreciated.

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

FAQ

Is the order in which I type classes with claxed relevant for their CSS specificity?

No. Claxed is only responsible to combine CSS classes and put the result in the html `class` attribute of the component. If you have any specificity problem you should look at how classes are defined in the CSS file

License

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

Contact

Tommaso Poletti - @Tomma5o

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