src="https://i.imgur.com/WztPF0R.png"
alt="Tassel">

src="http://img.badgesize.io/https://unpkg.com/tassel@latest/src/tassel.min.js?compression=gzip&style=flat-square&colorB=51C838"
alt="Gzip Size">
alt="NPM Version">
src="https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square" alt="License">

Tassel is an ultra-lightweight CSS-In-JS library inspired by cssmodules. Write styles, get unique classes which describe your components. Tassel works wherever there are classes: React, Vue or even vanillaJS.

- 📦 Zero dependencies
- 🔧 Zero configuration
- 🔥 < 1KB GZIPPED.

Install

Through NPM:
npm install --save tassel

Through Yarn:
yarn add tassel

Getting Started

Note: See the examples folder for framework specific implementations

$3

Landing.styles.js
``javascript
import Tassel from "tassel";

const $primary = "papayawhip";
const $accent = "palevioletred";

export default Tassel({
text: {
fontSize: "1.5em",
textAlign: "center",
color: $accent
},
container: {
padding: "4em",
background: $primary
}
});
`

Landing.jsx

`javascript
import React from "react";
import ReactDOM from "react-dom";

import styles from "./Landing.styles.js";

class Landing extends React.Component {
render() {
return (


const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);
``

$3

Classnames are automatically generated in the format {componentname}_{stylename} so you'll always know where a style came from. No more hunting down styles in your IDE.

$3

$3

$3

Contributing

Please open an issue and then raise a PR related to that issue. I'll try and respond within 24h.

Liscense

Tassel is licensed under a MIT License.