Yeah let's do that. You have everything related to your component on place instead of jumping between files.

Is jumping between files supposed to be difficult or something?

Without a lot of discipline it is very easy to end up with a css with lots of unclear and hard to guess effects. Eg consider the case of <A type=1><B><A type=2></A></B></A> where A and B are complex templates. Any selector with the " " operator on A risk expanding to the inner A even if it was intended only for the outer. Similarly a :has selector might catch a descendant of the wrong element.

@scope fixes a lot of this, but it is a complex problem. With tailwind you mostly have to worry about inheritance

▲

robertoandred an hour ago | parent [-]

This problem was solved a long time ago with CSS Modules.

	▲	christophilus 24 minutes ago \| parent [-]
		I prefer almost anything to CSS modules, so this bike shedding topic is probably very subjective.

▲

chrisweekly 2 hours ago | parent | prev | next [-]

Colocation is a useful principle in component-based architecture.

	▲	apsurd an hour ago \| parent [-]
		In my lived experience, shared components just become another problem. Especially in a fledgling company, the iteration velocity is actually negatively affected by shared libs because there's always overhead to (not) break legacy. so shared components bloat to address every evolving need. And now with AI generated code i see so many wrapper patterns that forward endless props down, it's crazy! TLDR: i almost always end up branching out into evergreen "reusable" components anyway. Very unlikely the component library the CTO asked claude to DRY up the code with, is the one to rule them all.

▲

runarberg 2 hours ago | parent | prev | next [-]

Also modern CSS is often written in a <style> tag either in a native web component or in a framework which supports single file component like vue or svelte.

▲

ewuhic 2 hours ago | parent | prev [-]

Is staying in one file supposed to be difficult or something?

	▲	luckylion an hour ago \| parent [-]
		this is grey text from tailwindcss.com, I wouldn't call it easy and readable. <div class="relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]"><p class="max-w-(--breakpoint-md) px-2 text-base/7 text-gray-600 max-sm:px-4 dark:text-gray-400">Because Tailwind is so low-level, it never encourages you to design the same site twice. Some of your favorite sites are built with Tailwind, and you probably had no idea.</p></div>