docs: Fix CSS attribute quoting

The commit updates the CSS files to use single quotes for attribute
selectors. This ensures consistency and avoids potential issues with
double quotes in attribute values.

Author: cameronapak

packages/ui/src/styles/bible-reader.css

@@ -1,5 +1,5 @@
 /* #region Bible Reader */
-[data-slot="yv-bible-renderer"] {
+[data-slot='yv-bible-renderer'] {
   /* Makes it where cascading styles from the parent app do not affect the bible reader */
   all: unset;
   --yv-reader-font-family: var(--font-sans), var(--font-serif);
@@ -69,7 +69,7 @@
     white-space: nowrap;
   }
 
-  &[data-show-verse-numbers="false"] .yv-vlbl {
+  &[data-show-verse-numbers='false'] .yv-vlbl {
     @apply yv:hidden;
   }
 
@@ -841,13 +841,13 @@
   }
 
   /* RTL Support */
-  &[dir="rtl"] {
+  &[dir='rtl'] {
     direction: rtl;
     text-align: right;
   }
 
-  &[dir="rtl"] .p,
-  &[dir="rtl"] .m {
+  &[dir='rtl'] .p,
+  &[dir='rtl'] .m {
     text-align: right;
   }
 }

packages/ui/src/styles/global.css

@@ -1,8 +1,29 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Source+Serif+Pro:wght@400;700&display=swap');
-/* Importing Tailwind this way opts us out of CSS layers (reasoning: https://github.com/tailwindlabs/tailwindcss/discussions/13188#discussion-6352337) */
-@import 'tailwindcss/theme.css' prefix(yv); /* The CSS linter error is a known issue and does not affect functionality */
+
+/*
+ * Tailwind v4 CSS Layer Opt-Out
+ * ==============================
+ * By default, Tailwind v4 wraps styles in CSS @layer directives. This causes
+ * specificity issues when consumers embed our SDK components alongside their
+ * own CSS—the consumer's non-layered styles can unexpectedly override our
+ * Tailwind utilities.
+ *
+ * Solution: Import Tailwind's CSS files separately instead of using
+ * `@import 'tailwindcss'`. This is Tailwind's officially supported method
+ * to opt out of CSS layers.
+ *
+ * The `prefix(yv)` ensures all Tailwind classes use a `yv-` prefix to avoid
+ * collisions with consumer Tailwind setups.
+ *
+ * Reference: https://github.com/tailwindlabs/tailwindcss/discussions/13188
+ *
+ * Note: CSS linter warnings on these imports are a known issue and do not
+ * affect functionality.
+ */
 @import 'tailwindcss/preflight.css' prefix(yv);
+@import 'tailwindcss/theme.css' prefix(yv);
 @import 'tailwindcss/utilities.css' prefix(yv);
+
 @import 'tw-animate-css';
 @import './bible-reader.css';