The problem of maintaining Tailwind.css, and the "solution" I came up with.

[yaquawa]

Recently, I've tried Tailwind.css in my real project, the idea behind Tailwind.css is nice, but at the same time, I found that if I go with a util first CSS framework, whenever I want to modify the styles, I had a hard time to locate the component file, and the corresponding tags that contains the utility classes, especially when collaborating with other people.

With CSS, it's rather easier to locate the selector by searching symbol or just searching cross files using the literal class name, or if you are using sass, sourcemap helps too.

I'd been struggling with this for a long time, and I'd like to share my solution I came up with -- "sourcemap for markup".
Not really the "sourcemap", but you get the similar result.

As you can see the demo below, to locate a tag, you just inspect any tags from browser directly, and jump into the source code instantly:

I named this thing: view-launcher

Currently it supports

• Laravel Blade
• Vue.js SFC

still in early development, I'm looking for more ideas, and hope it helps people who have had a hard time to maintain Tailwind.css like me😁

[Woods587]

Ugh, just spent an hour trying to figure this out. In my case I had a background set, however it was set to a color. This is not enough, you need to have the background of the view set to a drawable.

Upsers

[yaquawa]

Not sure what was happening in your environment, but PRs are always welcomed 🙃