diff --git a/src/twitter/components/Tweet.vue b/src/twitter/components/Tweet.vue
index d6ba8b16f..d5bf98971 100644
--- a/src/twitter/components/Tweet.vue
+++ b/src/twitter/components/Tweet.vue
@@ -114,22 +114,22 @@ export default {
 }
 </script>
 
-<style lang="postcss">
-blockquote.tweet {
+<style lang="postcss" scoped>
+.tweet {
   @apply my-5 p-6 pb-3 border border-gray-300 rounded-md mx-auto b-0 not-italic;
   @apply dark:border-gray-700;
   width: calc(min(100%, 550px)) !important;
-  & img {
+  & {
+    .tweet-quote {
+      @apply p-3;
+    }
+  }
+  img {
     @apply m-0;
   }
-}
-.tweet {
   .link {
     @apply block;
   }
-  &.tweet-quote {
-    @apply p-3;
-  }
   .emoji {
     @apply w-5 h-5 m-0 inline-block;
   }
diff --git a/src/twitter/index.ts b/src/twitter/index.ts
index f00550147..e44a7b6e8 100644
--- a/src/twitter/index.ts
+++ b/src/twitter/index.ts
@@ -1,4 +1,5 @@
 import { resolve } from 'path'
+import { Config as WindiConfig } from 'windicss/types/interfaces'
 import { Module } from '@nuxt/types'
 import { ParserOptions } from '../types'
 import tweetDirective from './lib/directive'
@@ -23,4 +24,8 @@ export default <Module>function docusTwitterModule() {
       level: 2
     })
   })
+
+  hook('windicss:options', (windiOptions: WindiConfig) => {
+    windiOptions.scanOptions.include.push(r('components') + '/*.vue')
+  })
 }