Replace Sass with PostCSS, include imports and nesting

assets/sass/app.sass

@@ -1,23 +0,0 @@
-@import '~font-awesome/css/font-awesome.css'
-@import '~highlightjs/styles/github-gist.css'
-
-@tailwind preflight
-
-@import 'base/base'
-@import 'base/images'
-@import 'base/vue'
-
-@tailwind components
-
-@import 'components/blockquote'
-@import 'components/button'
-@import 'components/link'
-@import 'components/listing'
-@import 'components/markdown'
-@import 'components/note'
-@import 'components/slides'
-@import 'components/table'
-@import 'components/talk/video'
-@import 'components/widget'
-
-@tailwind utilities

assets/sass/base/base.sass

@@ -1,36 +0,0 @@
-a
-  color: inherit
-  text-decoration: none
-
-  &:focus,
-  &:hover
-    text-decoration: underline
-
-main a
-  text-decoration: underline
-
-  &:focus,
-  &:hover
-    text-decoration: none
-
-h1, h2, h3
-  @apply mb-2
-
-.content
-  h2,
-  h3
-    @apply mt-6
-
-p,
-ul,
-ol,
-blockquote,
-table,
-pre
-  @apply mb-6
-
-.element-invisible
-  @apply absolute overflow-hidden break-normal
-  clip: rect(1px, 1px, 1px, 1px)
-  height: 1px
-  width: 1px

assets/sass/base/images.sass

@@ -1,12 +0,0 @@
-img
-  &.with-border
-    @apply border border-solid border-grey-light
-
-  &.with-padding
-    @apply p-1
-
-  &.avatar
-    @apply border p-1 rounded-full
-
-svg
-  fill: currentColor

assets/sass/base/vue.sass

@@ -1,20 +0,0 @@
-[v-cloak]
-  .v-cloak-block
-    @apply block
-
-  .v-cloak-inline
-    @apply inline
-
-  .v-cloak-inline-block
-    @apply inline-block
-
-  .v-cloak-hidden
-    @apply hidden
-
-  .v-cloak-invisible
-    @apply invisible
-
-.v-cloak-block,
-.v-cloak-inline,
-.v-cloak-inline-block
-  @apply hidden

assets/sass/components/blockquote.sass

@@ -1,2 +0,0 @@
-blockquote
-  @apply border-l-4 border-blue pl-4 px-6 py-2

assets/sass/components/button.sass

@@ -1,6 +0,0 @@
-.button
-  @apply bg-blue inline-block rounded text-white px-4 py-2
-
-  &:active,
-  &:hover
-    @apply bg-blue-dark

assets/sass/components/link.sass

@@ -1,2 +0,0 @@
-.link
-  @apply text-blue

assets/sass/components/listing.sass

@@ -1,8 +0,0 @@
-.listing
-  @apply pl-0
-
-.listing-item
-  @apply overflow-hidden pb-8
-
-  &:not(:last-child)
-    @apply border-b border-grey-light mb-8

assets/sass/components/markdown.sass

@@ -1,21 +0,0 @@
-.markdown
-  h2
-    @apply mt-8 mb-3 text-black
-
-  h2, h3
-    @apply text-black
-
-  p,
-  li
-    a
-      @apply link
-
-    code
-      @apply bg-grey-lighter inline-block font-mono text-sm px-1 py-px
-
-  p:last-child
-    @apply mb-0
-
-  pre code,
-  .hljs
-    @apply bg-grey-lighter block border-grey-dark border-l-4 font-mono leading-loose overflow-x-scroll p-6 rounded text-sm

assets/sass/components/note.sass

@@ -1,9 +0,0 @@
-.note
-  @apply bg-blue-lighter
-  @apply border-blue border-l-4 mb-4 p-4 rounded
-
-  & > *:last-child
-    @apply mb-0
-
-  p a
-    @apply text-black

assets/sass/components/slides.sass

@@ -1,15 +0,0 @@
-.slides
-  background: url('../images/loading.gif') center no-repeat
-  min-height: 275px
-
-  @screen md
-    &
-      min-height: 375px
-
-  @screen lg
-    &
-      min-height: 450px
-
-  @screen xl
-    &
-      min-height: 560px

assets/sass/components/table.sass

@@ -1,20 +0,0 @@
-.table-collapse
-  @apply border-collapse
-
-.table-responsive
-  @apply mb-4 border w-full overflow-x-auto overflow-y-hidden
-
-  table
-    @apply mb-0 border-0 whitespace-no-wrap
-
-.table
-  @apply w-full table-collapse
-
-  tr:nth-child(odd)
-    @apply bg-grey-lighter
-
-  tr th
-    @apply text-left p-3 bg-white
-
-  td
-    @apply p-3 border-t

assets/sass/components/talk/video.sass

@@ -1,4 +0,0 @@
-.talk-video
-  iframe,
-  embed
-    @apply absolute h-full pin-l pin-t w-full

assets/sass/components/widget.sass

@@ -1,2 +0,0 @@
-.widget
-  @apply mb-6 block