Nuxt/docs/components/atoms/Alert.vue

<template>
  <div class="p-4 mt-4 mb-4 rounded-lg alert text-sm leading-relaxed" :class="[type]">
    <div class="flex items-start">
      <InjectComponent
        v-if="icon"
        :component="icon"
        class="inline-flex mr-2 w-5 h-5 justify-center items-center text-1.2rem"
      >
        {{ icon }}
      </InjectComponent>
      <div class="flex-grow alert-content">
        <Markdown unwrap="p">
          <template #between>
            <br>
          </template>
        </Markdown>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from '@nuxtjs/composition-api'

export default defineComponent({
  props: {
    icon: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'info',
      validator (value) {
        return ['info', 'success', 'warning', 'danger'].includes(value)
      }
    }
  }
})
</script>

<style lang="postcss" scoped>
.alert {
  &.success {
    @apply bg-green-50 dark:bg-green-800 dark:bg-opacity-25 text-green-600 dark:text-green-200;
    >>> {
      code {
        @apply bg-green-100 dark:bg-green-900 dark:bg-opacity-50 shadow-none text-current;
      }
      a:hover {
        code {
          @apply border-green-400 dark:border-green-700;
        }
      }
    }
  }
  &.info {
    @apply bg-blue-50 dark:bg-blue-800 dark:bg-opacity-25 text-blue-600 dark:text-blue-200;
    >>> {
      code {
        @apply bg-blue-100 dark:bg-blue-900 dark:bg-opacity-50 shadow-none text-current;
      }
      a:hover {
        code {
          @apply border-blue-400 dark:border-blue-700;
        }
      }
    }
  }
  &.warning {
    @apply bg-yellow-50 dark:bg-yellow-800 dark:bg-opacity-25 text-yellow-600 dark:text-yellow-100;
    >>> {
      code {
        @apply bg-yellow-100 dark:bg-yellow-900 dark:bg-opacity-50 shadow-none text-current;
      }
      a:hover {
        code {
          @apply border-yellow-400 dark:border-yellow-700;
        }
      }
    }
  }
  &.danger {
    @apply bg-red-50 dark:bg-red-800 dark:bg-opacity-25 text-red-600 dark:text-red-100;
    >>> {
      code {
        @apply bg-red-100 dark:bg-red-900 dark:bg-opacity-50 shadow-none text-current;
      }
      a:hover {
        code {
          @apply border-red-400 dark:border-red-700;
        }
      }
    }
  }

  >>> {
    strong {
      @apply font-semibold text-current;
    }
    a {
      @apply underline border-none font-semibold text-current;
      code {
        @apply border border-transparent border-dashed;
      }
    }
  }
}

.alert >>> p {
  @apply m-0 !important;
}

.dark .alert {
  >>> {
    a {
      @apply text-current;
    }
  }
}
</style>