# classfix

> Transform a string object into a clean string to make the className more orderly.

Latest version **1.0.2** (published 2024-01-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install classfix
pnpm add classfix
yarn add classfix
bun add classfix
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2024-01-16 |
| First published | 2023-12-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | CarmeloCampos |
| Maintainers | carmelocampos |
| Keywords | classfix, class, classes, classname, classnames, clsx, tailwind, css |

## Links

- npm: https://www.npmjs.com/package/classfix
- Repository: https://github.com/CarmeloCampos/classfix
- Homepage: https://github.com/CarmeloCampos/classfix#readme
- Issues: https://github.com/CarmeloCampos/classfix/issues
- npm.io page: https://npm.io/package/classfix

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2024-01-16
- 1.0.1 — 2023-12-14
- 1.0.0 — 2023-12-14

## README

# classFix

Utility designed to facilitate the manipulation and management of class names in React environments.

## Installation

Install classfix with npm

```bash
npm install classfix
```

## Usage Valid

```javascript
import classFix from "classfix";

function App() {
  return (
    <Component className={classFix(["text-md", "xl:text-md", "2xl:text-xl"])} />
  );
}
```

## Usage Invalid

```javascript
import classFix from "classfix";

function App() {
  return (
    <Component className={classFix(["class1", "class with space", "class3"])} />
  );
}
```

## Screenshots

![Usage Screenshot](https://i.imgur.com/dOhMtXV.png)

### Using Tailwind CSS IntelliSense

The main use has been with [React](https://react.dev/) and also with [Tailwind](https://tailwindcss.com/).

We recommend the use of the extension [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
![CSS IntelliSense](https://imgur.com/yzg6HqP.jpg)

## License

[MIT](https://choosealicense.com/licenses/mit/)

---
_Source: https://npm.io/package/classfix · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._