feat: stop leaking Tailwind's preflight styles to global HTML

subugoe · Jun 9, 2024 · 4ecc839 · 4ecc839
1 parent f636a09
commit 4ecc839
Show file tree

Hide file tree

Showing 4 changed files with 405 additions and 9 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="tido t-h-full t-flex t-flex-col t-bg-gray-200 dark:t-bg-gray-900 t-text-gray-800 dark:t-text-gray-200">
+  <div class="tido">
+    <div class="t-h-full t-flex t-flex-col t-bg-gray-200 dark:t-bg-gray-900 t-text-gray-800 dark:t-text-gray-200">
       <GlobalHeader/>
       <PanelsWrapper v-if="ready"/>
       <div v-else class="t-flex t-relative t-flex-1 t-justify-center t-items-center t-p-4 lg:t-p-6">
@@ -23,6 +24,7 @@
           </template>
         </div>
       </div>
+    </div>
   </div>
 </template>
 
@@ -81,9 +83,9 @@ const ready = computed(() => {
 const annotations = computed<Annotation[]>(() => annotationStore.annotations);
 const config = computed(() => configStore.config);
 const collection = computed<Collection>(() => contentStore.collection);
-const item = computed<Item>(() => contentStore.item); 
-const manifest = computed<Manifest>(() => contentStore.manifest);  
-const manifests = computed<Manifest[]>(() => contentStore.manifests); 
+const item = computed<Item>(() => contentStore.item);
+const manifest = computed<Manifest>(() => contentStore.manifest);
+const manifests = computed<Manifest[]>(() => contentStore.manifests);
 initUseDark(config.value.container);
 
 onMounted(async () => {
@@ -105,7 +107,7 @@ onMounted(async () => {
 
 async function getCollection(url: string) {
   const contentStore = useContentsStore()
-  await contentStore.initCollection(url)    
+  await contentStore.initCollection(url)
 }
 async function loadConfig() {
   try {
@@ -118,11 +120,11 @@ async function loadConfig() {
 }
 async function getManifest(url: string) {
   const contentStore = useContentsStore()
-  await contentStore.initManifest(url)     
+  await contentStore.initManifest(url)
 }
 async function getItem(url: string) {
   const contentStore = useContentsStore()
-  await contentStore.initItem(url)      
+  await contentStore.initItem(url)
 }
 async function init() {
   const { collection, manifest, item } = config.value;
@@ -156,4 +158,10 @@ function setColorMode(configValue: string) {
   }
 }
 
-</script>
+</script>
+<style>
+.tido {
+  width: 100%;
+  height: 100%;
+}
+</style>