diff --git a/resources/css/plugin.css b/resources/css/plugin.css
index 4af500b..71d86ee 100644
--- a/resources/css/plugin.css
+++ b/resources/css/plugin.css
@@ -22,11 +22,3 @@
 .cm-content {
     padding: 0.5rem !important;
 }
-
-.cm-scroller {
-    max-height: var(--maxInputHeight) !important;
-}
-
-.cm-scroller, .cm-gutter {
-    min-height: var(--minInputHeight) !important;
-}
diff --git a/resources/dist/filament-code-field.css b/resources/dist/filament-code-field.css
index 41e06c2..c71ab76 100644
--- a/resources/dist/filament-code-field.css
+++ b/resources/dist/filament-code-field.css
@@ -1 +1 @@
-.cm-editor,.cm-editor:not(.cm-focused) .cm-activeLine,.cm-editor:not(.cm-focused) .cm-activeLineGutter{background:#0000!important}.cm-editor *{font-family:inherit;font-size:15px;line-height:25px}.cm-lineNumbers{padding-right:10px}.cm-content{padding:.5rem!important}.cm-scroller{max-height:var(--maxInputHeight)!important}.cm-gutter,.cm-scroller{min-height:var(--minInputHeight)!important}.dark .dark\:border-gray-600{--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity))}.dark .dark\:bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.dark .dark\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.dark .dark\:focus\:border-primary-500:focus{--tw-border-opacity:1;border-color:rgb(245 158 11/var(--tw-border-opacity))}
\ No newline at end of file
+.cm-editor,.cm-editor:not(.cm-focused) .cm-activeLine,.cm-editor:not(.cm-focused) .cm-activeLineGutter{background:#0000!important}.cm-editor *{font-family:inherit;font-size:15px;line-height:25px}.cm-lineNumbers{padding-right:10px}.cm-content{padding:.5rem!important}.dark .dark\:border-gray-600{--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity))}.dark .dark\:bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.dark .dark\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.dark .dark\:focus\:border-primary-500:focus{--tw-border-opacity:1;border-color:rgb(245 158 11/var(--tw-border-opacity))}
\ No newline at end of file
diff --git a/resources/views/code-field.blade.php b/resources/views/code-field.blade.php
index 9b1932f..1152a03 100644
--- a/resources/views/code-field.blade.php
+++ b/resources/views/code-field.blade.php
@@ -13,12 +13,18 @@
     :disabled="$isDisabled()"
     dir="ltr"
 >
+    @php($codeFieldId = 'code-field-'.\Illuminate\Support\Str::slug($getId()))
+
     <style>
-        :root {
-            --minInputHeight: {{ $getMinHeight() }};
-            --maxInputHeight: {{ $getMaxHeight() }};
+        #{{ $codeFieldId }} .cm-scroller {
+            max-height: {{ $getMaxHeight() }} !important;
+        }
+
+        #{{ $codeFieldId }} .cm-scroller, .cm-gutter {
+            min-height: {{ $getMinHeight() }} !important;
         }
     </style>
+
     <div x-data="filamentCodeField({
         state: $wire.{{ $applyStateBindingModifiers('entangle(\''.$getStatePath().'\')') }},
         displayMode: {{ $displayMode ? 1 : 0 }},
@@ -27,9 +33,10 @@
         withLineNumbers: {{ $lineNumbers ? 1 : 0 }},
         withAutocompletion: {{ $autocompletion ? 1 : 0 }}
     })">
-        <div wire:ignore
-             x-ref="codeBlock"
-             class="bg-white border overflow-hidden block w-full transition duration-75 rounded-lg shadow-sm focus:border-primary-500 focus:ring-1 focus:ring-inset focus:ring-primary-500 disabled:opacity-70 dark:bg-gray-700 dark:text-white dark:focus:border-primary-500 border-gray-300 dark:border-gray-600"
-        ></div>
+        <div id="{{ $codeFieldId }}" wire:ignore>
+            <div x-ref="codeBlock"
+                 class="bg-white border overflow-hidden block w-full transition duration-75 rounded-lg shadow-sm focus:border-primary-500 focus:ring-1 focus:ring-inset focus:ring-primary-500 disabled:opacity-70 dark:bg-gray-700 dark:text-white dark:focus:border-primary-500 border-gray-300 dark:border-gray-600"
+            ></div>
+        </div>
     </div>
 </x-dynamic-component>