bstasse

If you're using React, I'd recommend using Silk (silkhq.com) to create native-like bottom sheets, pages, sidebar, etc.

Most animations, including the swipe, are hardware-accelerated, and it deals with a lot of common issues you encounter on the mobile web (body scrolling, on-screen keyboard, etc).

Disclaimer: I'm the creator of Silk.

As mentioned in other comments, CSS does not run scripts. In this case, it is just used to store the content of a script as a string in a custom property, which is then retrieved by another script, and run.

This is the equivalent of predefined variables (usable in any preprocessor and now even in plain CSS), nothing specific about Tailwind here. Except for the fact that in the case of Tailwind they are tied to properties, but they are defined globally under the hood, so this doesn't change anything.

So your design systems team has to be able to code React components, or any change or new component has to be coded by a developer before being made available to your product designers?

If so, does is not lengthen and complicate a lot your design process?