Use sugarss

src/assets/css/components/links.css

@@ -1,3 +1,2 @@
-a:hover {
+a:hover
   @apply underline
-}

src/assets/css/components/search-form.css

@@ -1,5 +1,3 @@
-.search-form {
-  > input:focus + svg {
+.search-form
+  > input:focus + svg
     @apply opacity-100
-  }
-}

src/assets/css/custom-components.css

@@ -1,2 +1,2 @@
-@import 'components/links';
-@import 'components/search-form';
+@import 'components/links'
+@import 'components/search-form'

src/assets/css/tailwind.css

@@ -1,6 +1,6 @@
-@import 'tailwindcss/base';
+@import 'tailwindcss/base'
 
-@import 'tailwindcss/components';
-@import 'custom-components';
+@import 'tailwindcss/components'
+@import 'custom-components'
 
-@import 'tailwindcss/utilities';
+@import 'tailwindcss/utilities'

src/components/AlertMessage.vue

@@ -5,12 +5,10 @@
 </template>
 
 <style type="postcss" scoped>
-a {
-  @apply underline;
+a
+  @apply underline
 
   &:hover,
-  &:focus {
+  &:focus
     @apply no-underline
-  }
-}
 </style>