(Art by shahabalizadeh)

• You want an easy inline vanilla CSS experience without Tailwind CSS.
• Hate creating unique class names over.. and over.. to use once.
• You want to co-locate your styles for ⚡️ Locality of Behavior (LoB)
• You wish this would work in <style> tags.
• Use all CSS features: Nesting, animations. Get scoped @keyframes!
• Only 18 lines. No build step. No dependencies.
• Pairs well with htmx and Surreal
• Want fewer layers, less complexity. Are aware of the cargo cult. ✈️

✨ Want to also scope your <script> tags? See our companion project Surreal

<div>
    <style>
        .me { background: red; } /* ✨ .this and .self also work! */
        .me button { background: blue; }
    </style>
    <button>I'm blue</button>
</div>

See the Live Example! Then view source.

This uses MutationObserver to monitor the DOM, and the moment a <style> tag is seen, it scopes the styles to whatever the parent element is. No flashing or popping.

This method also leaves your existing styles untouched, allowing you to mix and match at your liesure.

Use whatever you'd like, but there's a few advantages with this approach over Tailwind CDN, Twind, UnoCSS:

• No repeated styles on child elements (no [&>*], no extracting classes, no groups). It's just CSS!
• No high risk of eventually requiring a build step. It's just CSS!
• Get the ultra-fast "inspect, play with styles, paste" workflow back. It's just CSS!
• No suffering from FOUC (a flash of unstyled content).
• No chance of deprecations. 18 lines is infinitely maintainable.
• Zero friction movement of styles between inline and .css files. Just replace .me
• No special syntax or editor plugins to install- works with the tools you have.