A tailwind color preset for Semi Design.
Heavily inspired by twin.arco
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>
pnpm install twin.semi -D
// tailwind.config.js
const { twinSemiPreset } = require('twin.semi')
module.exports = {
presets: [twinSemiPreset()],
}
MIT License © 2022 codpoe