Remix.run Logo
hennell 15 hours ago

Tailwind (like most things) is way more complex than it first appears.

Sure the main thing was originally 'just' mapping `.p-4` to `padding: 1rem`. But it's also about grepping the code to see if `p-4` is used so it only builds needed classes. It also needs to work with things like their responsive and state classes so `md:p-4` or `hover:p-4` add the padding only on medium or larger screens, or when hovered etc.

All of which increased to support more and more css features and arbitrary values so `not-supports-[display:grid]:p-[5px]` generates the required code to check if grid is supported and add 5px padding or whatever other values you put in the [].

You can question if that's really a sensible idea, but it is undeniably a pretty complex challenge. Not sure it compares to blender, I imagine that has a lot more maths involved - put probably less edge cases and weird displays odd in X browser bugs.