SC.Canvas appears to add a <canvas> element inside a <div class="container"> causing an issue with Tailwind CSS

[hardingjam]

This is my code for a Canvas.svelte component

<script lang="ts">
	import * as SC from 'svelte-cubed';
	import * as THREE from 'three';
	import ReusableGltf from '$lib/components/atoms/ReusableGLTF.svelte';
	import { updateModelStatus } from '$lib/stores/stores';
	export let modelURL;

	function handleStatusChange(evt) {
		updateModelStatus(evt.detail);
	}
</script>

<SC.Canvas antialias shadows background={new THREE.Color('papayawhip')}>
	<SC.PerspectiveCamera position={[0.5, 0, 10]} />

	<SC.OrbitControls enableZoom={false} />

	<SC.DirectionalLight
		color={new THREE.Color(0xffffff)}
		position={[10, 10, 10]}
		intensity={1}
		shadow={false}
	/>
	<SC.AmbientLight color={new THREE.Color(0xffffff)} intensity={0.75} />
	<ReusableGltf {modelURL} on:statusChange={handleStatusChange} />
</SC.Canvas>

DevTools shows the following elements in the DOM tree:

Is the SC.Canvas automatically embedded in this <div class="container">?
When using tailwind, this causes the div to have the same dimensions as the next-lowest media query breakpoint. It would make it necessary to override the Tailwind container class, in order to properly resize the canvas.

[DefinitelyMaybe]

yes it is.

or copy the source into local project and adjust to suit.

[TrippleCCC]

I'm having a similar issue as well. Would it be possible to change the library to use a name like sc-container? I think this would fix the issue and make the library more compatible with other libraries that use a container class. I would be happy to take up this issue if needed.