(Art by shahabalizadeh)

• You want an easy inline vanilla CSS experience without Tailwind CSS.
• Hate typing individual class selectors and ids over.. and over..
• You want to co-locate your <style> tags for ⚡️ Locality of Behavior (LoB)
• You wish this would work in <style> tags.
• Only 15 lines. No build step. No dependencies.
• Use all native features: CSS Nesting, animations and scoped @keyframes
• Pairs well with Surreal and htmx
• 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:

• No suffering from FOUC (a flash of unstyled content) as experienced in Tailwind CDN, Twind, UnoCSS.
• No high risk of eventually requiring a build step. It just works.
• No chance of deprecations. 15 lines is infinitely maintainable.
• Use the browser inspector to live edit / copy / paste styles.
• Universal vanilla CSS. No special syntax or editor plugins to install.