Skip to content

Codpoe/twin.semi

Repository files navigation

twin.semi

A tailwind color preset for Semi Design.

Heavily inspired by twin.arco

Why

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:

<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

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

Installation

pnpm install twin.semi -D

Configuration

// tailwind.config.js

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

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

License

MIT License © 2022 codpoe

About

A tailwind preset for semi design

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published