Nijor's style modules feature, inspired by Tailwind CSS, allows you to store CSS files in the src/style/modules/ directory. You can apply styles from these files to any HTML tag using the n:style attribute, which includes only the specified classes in the final CSS file. Through treeshaking, unused classes and animations from the directory are removed, ensuring the CSS remains lightweight and efficient.
/* src/styles/modules/container.css */
.container {
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
/* src/styles/modules/text.css */
.bold {
font-weight: bold;
}
.light {
letter-spacing: 5px;
font-weight: 400;
}
<!-- Some random Nijor component or page -->
<body>
<div n:style="container flex">
<h1 n:style="light">Nijor is Awesome !</h1>
</div>
</body>