Clean up styles in with-tailwindcss example (#12458)

examples/with-tailwindcss/components/nav.js

@@ -14,9 +14,9 @@ export default function Nav() {
             <a className="text-blue-500 no-underline">Home</a>
           </Link>
         </li>
-        <ul className="flex justify-between items-center">
+        <ul className="flex justify-between items-center space-x-4">
           {links.map(({ href, label }) => (
-            <li key={`${href}${label}`} className="ml-4">
+            <li key={`${href}${label}`}>
               <a href={href} className="btn-blue no-underline">
                 {label}
               </a>

examples/with-tailwindcss/styles/button.css

@@ -1,3 +0,0 @@
-.btn-blue {
-  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
-}

examples/with-tailwindcss/styles/index.css

@@ -1,23 +1,18 @@
-@import './button.css';
-
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+
+.btn-blue {
+  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
+}
 
 .hero {
-  width: 100%;
+  @apply py-20;
-  color: #333;
 }
 
 .title {
-  margin: 0;
+  @apply text-5xl text-center;
-  width: 100%;
+  color: #333;
-  padding-top: 80px;
   line-height: 1.15;
-  font-size: 48px;
 }
 
-.title,
+@tailwind utilities;
-.description {
-  text-align: center;
-}