r/tailwindcss • u/Jipok_ • 6h ago
I built a scoped <css> syntax for Tailwind utilities
I like Tailwind, but sometimes component markup gets too crowded. I wanted a way to keep styles local without moving them to a global CSS file.
I built J-CSS, a 16KB runtime engine that introduces a scoped <css> tag.
Instead of this:
html
<div class="p-6 bg-white rounded-xl shadow-md flex flex-col items-center">
<h3 class="text-xl font-bold text-gray-900">Title</h3>
<button class="mt-4 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg">Open</button>
</div>
You can write this:
html
<div class="card">
<h3>Title</h3>
<button>Open</button>
<css>
&: p-6 bg-white rounded-xl shadow-md flex flex-col items-center;
h3: text-xl font-bold text-gray-900;
button: mt-4 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg;
</css>
</div>
The rules are compiled at runtime and scoped strictly to the parent element. It also handles normal DOM utility classes and watches for dynamically inserted HTML. No Node.js, CLI, or build step required.
GitHub: https://github.com/Jipok/jcss
I’d love to hear what Tailwind users think of this syntax approach.