Using Tailwind CSS with Row and Dropdown

[chipnetics]

Hi all, I've flubbed my way through using Carbon with Tailwind for a while, but now getting frustrated and need to understand intergration better. Probably something fundaemental I'm not understanding.

I have the below snippet, but want my Dropdown to be wider because the dropdown option text overflows the component width. However for some reason when I use w-100 vs w-80 it actually renders narrower. Trying other w- values the width is all over the place and inconsistent as well (sometimes rendering the full width of the screen view).

Any help is appreciated!

<Row>
	<div class="flex w-80">
			<div class="flex-grow">
				<Dropdown
					titleText="Available categorical summaries"
					selectedId={'0'}
					items={dropdownSelectors}
					direction="bottom"
					on:select={async (e) => {
						renderSunburst = false;
						await tick();
						summarizeBy = e.detail.selectedItem.value;
						renderSunburst = true;
					}}
				/>
			</div>
	</div>
</Row>

[robinbdru]

Hey! So you succeed using Tailwind AND Carbon Svelte?
I tried to setup Tailwind and Carbon into my app but the css imports are conflicting.

[Ranzeplay]

How did you do that?