Updated tailwindcss templates.

Author: jscarle

template/code/tailwindcss-default/src/App.vue

@@ -4,44 +4,29 @@ import TheWelcome from './components/TheWelcome.vue'
 </script>
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
+  <div
+    class="min-h-screen bg-white dark:bg-gray-900 text-slate-800 dark:text-gray-200 transition-colors duration-500 font-sans text-sm leading-relaxed antialiased"
+  >
+    <div
+      class="max-w-screen-xl mx-auto px-8 py-8 font-normal lg:flex lg:items-center lg:min-h-screen"
+    >
+      <header class="leading-6 lg:flex lg:items-center lg:pr-20">
+        <img
+          alt="Vue logo"
+          class="logo block mx-auto mb-8 lg:mx-0 lg:mr-8 lg:mb-0"
+          src="./assets/logo.svg"
+          width="125"
+          height="125"
+        />
+
+        <div class="wrapper lg:flex lg:items-start lg:flex-wrap">
+          <HelloWorld msg="You did it!" />
+        </div>
+      </header>
+
+      <main class="lg:flex-1">
+        <TheWelcome />
+      </main>
     </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
+  </div>
 </template>
-
-<style scoped>
-header {
-  line-height: 1.5;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-}
-</style>

template/code/tailwindcss-default/src/assets/base.css

@@ -1,35 +1,13 @@
-@import './base.css';
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
-}
+@import "tailwindcss";
 
+/* Custom styles that complement Tailwind */
 a,
 .green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
+  @apply text-emerald-600 no-underline transition-all duration-400 px-1 py-0.5;
 }
 
 @media (hover: hover) {
   a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
+    @apply bg-emerald-600/20;
   }
-}
+}

template/code/tailwindcss-default/src/assets/main.css

@@ -8,37 +8,12 @@ defineProps({
 </script>
 
 <template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
+  <div class="greetings text-center lg:text-left">
+    <h1 class="green font-medium text-5xl relative -top-2.5">{{ msg }}</h1>
+    <h3 class="text-xl">
+      You've successfully created a project with
       <a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
       <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
     </h3>
   </div>
 </template>
-
-<style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  position: relative;
-  top: -10px;
-}
-
-h3 {
-  font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
-  text-align: center;
-}
-
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
-  }
-}
-</style>

template/code/tailwindcss-default/src/components/HelloWorld.vue

@@ -16,7 +16,7 @@ const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
     </template>
     <template #heading>Documentation</template>
 
-    Vue’s
+    Vue's
     <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
     provides you with all information you need to get started.
   </WelcomeItem>

template/code/tailwindcss-default/src/components/TheWelcome.vue

@@ -1,87 +1,17 @@
 <template>
-  <div class="item">
-    <i>
+  <div
+    class="item mt-8 flex relative lg:mt-0 lg:py-2 lg:pl-20 lg:pb-4 before:lg:content-[''] before:lg:border-l before:lg:border-gray-300 before:lg:dark:border-gray-600 before:lg:absolute before:lg:left-0 before:lg:bottom-[calc(50%+25px)] before:lg:h-[calc(50%-25px)] after:lg:content-[''] after:lg:border-l after:lg:border-gray-300 after:lg:dark:border-gray-600 after:lg:absolute after:lg:left-0 after:lg:top-[calc(50%+25px)] after:lg:h-[calc(50%-25px)] first:before:lg:hidden last:after:lg:hidden"
+  >
+    <i
+      class="flex items-center justify-center w-8 h-8 text-slate-800 dark:text-gray-200 lg:absolute lg:top-[calc(50%-25px)] lg:left-[-26px] lg:border lg:border-gray-300 lg:dark:border-gray-600 lg:bg-white lg:dark:bg-gray-900 lg:rounded-lg lg:w-12 lg:h-12"
+    >
       <slot name="icon"></slot>
     </i>
-    <div class="details">
-      <h3>
+    <div class="details flex-1 ml-4">
+      <h3 class="text-xl font-medium mb-2 text-slate-800 dark:text-white">
         <slot name="heading"></slot>
       </h3>
       <slot></slot>
     </div>
   </div>
 </template>
-
-<style scoped>
-.item {
-  margin-top: 2rem;
-  display: flex;
-  position: relative;
-}
-
-.details {
-  flex: 1;
-  margin-left: 1rem;
-}
-
-i {
-  display: flex;
-  place-items: center;
-  place-content: center;
-  width: 32px;
-  height: 32px;
-
-  color: var(--color-text);
-}
-
-h3 {
-  font-size: 1.2rem;
-  font-weight: 500;
-  margin-bottom: 0.4rem;
-  color: var(--color-heading);
-}
-
-@media (min-width: 1024px) {
-  .item {
-    margin-top: 0;
-    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
-  }
-
-  i {
-    top: calc(50% - 25px);
-    left: -26px;
-    position: absolute;
-    border: 1px solid var(--color-border);
-    background: var(--color-background);
-    border-radius: 8px;
-    width: 50px;
-    height: 50px;
-  }
-
-  .item:before {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    bottom: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:after {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    top: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:first-of-type:before {
-    display: none;
-  }
-
-  .item:last-of-type:after {
-    display: none;
-  }
-}
-</style>