miracle/layouts/default.vue

<template>
  <div>
    <div>
      <Header />
      <nuxt />
      <Footer />
    </div>
  </div>
</template>

<script>
// import FloatingYuriko from '~/components/FloatingYuriko'
import Header from '~/components/Header'
export default {
  components: {
//    FloatingYuriko
    Header,
  }
}
</script>

<style>
@import 'tailwindcss/base';

@import 'tailwindcss/components';

@import 'tailwindcss/utilities';

html {
    @apply font-sans;
}
.main {
    @apply px-4 py-4;
}
@screen md {
  .main {
    @apply px-8;
  }
}
@screen lg {
  .main {
    @apply px-16;
  }
}
@screen xl {
  .main {
    @apply px-32;
  }
}
.page {
  @apply w-full;
}
.main p {
  @apply my-4;
}
.main h1 {
  @apply my-4 text-4xl font-light;
}
.main h2 {
  @apply my-4 text-3xl font-light;
}
.main h3 {
  @apply my-4 text-2xl font-light;
}
.main h4 {
  @apply my-4 text-xl font-light;
}
.main h5 {
  @apply my-4 text-lg font-light;
}
.main h6 {
  @apply my-4 text-base font-light;
}
.main a {
  @apply text-yuika-blue-700;
}
.main a:hover {
  @apply underline;
}
.main ul {
  @apply list-disc;
}
.main ul li p {
  @apply my-0;
}
.main ol {
  @apply list-decimal;
}
.main code {
  @apply bg-gray-200 text-yuika-blue-700 whitespace-pre-wrap;
}
.main blockquote {
  @apply border-l-4 border-yuika-blue-700 pl-8 py-2 my-8;
}
.main pre {
  @apply bg-gray-200 text-yuika-blue-700 px-2 py-2 px-2 border border-yuika-blue-500 my-8;
}

blockquote {
   @apply border-l-4 border-white pl-8 text-yuika-blue-500;
}

.gallery {
    @apply flex flex-row flex-wrap items-center;
}
.gallery .gallery-image {
    @apply w-full px-4 py-4;
}

</style>