# twin.semi

> A tailwind color preset for Semi Design

Latest version **0.1.1** (published 2022-12-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install twin.semi
pnpm add twin.semi
yarn add twin.semi
bun add twin.semi
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2022-12-31 |
| First published | 2022-05-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 17.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Codpoe |
| Maintainers | codpoe |
| Keywords | tailwind preset, semi design |

## Links

- npm: https://www.npmjs.com/package/twin.semi
- Repository: https://github.com/Codpoe/twin.semi
- Homepage: https://github.com/Codpoe/twin.semi#readme
- Issues: https://github.com/Codpoe/twin.semi/issues
- npm.io page: https://npm.io/package/twin.semi

## 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

- 0.1.1 (latest) — 2022-12-31
- 0.1.0 — 2022-05-27

## README

# twin.semi

A tailwind color preset for Semi Design.
> Heavily inspired by [twin.arco](https://github.com/bytesfriends/twin.arco)

## Why

[Semi Design](https://semi.design) provides a set of CSS Variables, both color palette and theme.

Without this preset, we may need to write the class names like this in tailwind to use the semi css variables:

```html
<div class="text-[color:var(--semi-color-primary)] "></div>
```

It's very verbose!

But now we have this color preset, we can use semi variables like writing normal tailwind class names

```html
<div class="text-semi-color-primary"></div>
```

## Installation

```
pnpm install twin.semi -D
```

## Configuration

```js
// tailwind.config.js

const { twinSemiPreset } = require('twin.semi')

module.exports = {
  presets: [twinSemiPreset()],
}
```

## License
MIT License © 2022 [codpoe](https://github.com/codpoe)

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