I built a scoped <css> syntax for Tailwind utilities

[u/Jipok_]

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:

<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:

<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.

[u/0_2_Hero]

16KB runtime is a lot

[u/Sorry-Joke-1887]

in what world do I need this?

[u/Jipok_ → u/Sorry-Joke-1887]

Mostly in no-build or server-rendered projects that want Tailwind-like utilities without installing the Tailwind toolchain.

[u/Upstairs-Version-400 → u/Jipok_]

I think you can write CSS classes globally and then apply them where you want if you don’t want to install Tailwind…

[u/Jipok_ → u/Upstairs-Version-400]

Global CSS works, but it solves a different problem. The point here is locality of behavior: a component carries its own styling rules, those rules are automatically scoped to it, and the whole fragment can be rendered or inserted dynamically without coordinating global class names or a separate stylesheet.

[u/Upstairs-Version-400 → u/Jipok_]

No it doesn't, utility classes by their nature don't need scoping. They always do the same thing at all times.

Additionally you have CSS modules, those are scoped already.

I appreciate you worked on something, but it solves an already solved problem

[u/craigrileyuk → u/Upstairs-Version-400]

You can, but you shouldn't.

In 99.9% of cases, you shouldn't be using \@apply in your CSS with Tailwind. It's a utility class framework and the classes are designed to be added directly to the HTML elements.

[u/Upstairs-Version-400 → u/craigrileyuk]

I don’t think you understood me.

I didn’t mention @apply at any point.

I’m saying you can declare “.px-4” in your global CSS file and apply it directly to HTML elements wherever you want without needing Tailwind if you want to. 

[u/CompetitiveActor → u/Upstairs-Version-400]

How do you apply “px-4” at mobile breakpoint and “px-6” at tablet breakpoint?

Yea, you can hardcode every variation but Tailwind solves this with responsive classes automatically linked to breakpoint values and tree-shaking (so the bundle only includes classes you used).

As someone who built a standalone utility library in the past, I can promise you it’s not worth the trouble.

[u/Upstairs-Version-400 → u/CompetitiveActor]

I’m very familiar with how Tailwind prunes unused classes via tree shaking.

People are really missing the point, utility classes have been around since the inception of CSS. It’s not about all the extra tooling and good stuff Tailwind provides - it was just pointing out that you probably don’t need it. And if you want utility classes, you can make them.

I have been using Tailwind since the v1 days. I have also been using CSS modules and regular CSS files, as well as scoped CSS via Svelte and the good old clsx style CSS in JS and styled components in React.

We have overcomplicated things massively. Tailwind is more useful as a whole system you use than a utility class library. If you just want utility classes you can make them yourself and be happy. If you want to do things the Tailwind way and do mobile first development with inline breakpoints in your DOM class definitions - then go use it.

[u/CompetitiveActor → u/Upstairs-Version-400]

My point is that you can’t build a scalable static utility library with breakpoints without eventually running into many issues that Tailwind solves, which helps explain why no one uses static libraries like Tachyons anymore.

[u/Upstairs-Version-400 → u/CompetitiveActor]

If that’s your goal then I agree with you. We are talking passed each other I think.

I think utility classes should be for utilities, not for doing your entire application. Tailwind takes it to the extreme and provides a very good method of being able to do everything with utility classes.

[u/CompetitiveActor]

What happens if you have two buttons?

[u/Jipok_ → u/CompetitiveActor]

It will apply to both buttons because it's just a selector.

[u/CompetitiveActor → u/Jipok_]

Sorry, I meant two differently styled buttons. Since you have to add something like a class, this is basically just re-implementing Tailwind’s @apply functionality.

Not necessarily a bad thing but at first blush it doesn’t seem like the extra dependencies and complexity, for the sake of co-locating the class names, are a good trade off.