Go back Tailwind CSS for Beginners

How to start if I'm new to WebDevelopment (Tailwind)



Simple Template from TailwindCSS page

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

Example from video


<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>

  <!-- https://meme.eq8.eu/ -->
  <img class="h-24 w-24 object-cover"  src="images/me.jpg" alt="Myself haha">
  <img class="h-24 w-24 object-cover mt-2"  src="https://meme.eq8.eu/excelent.jpg" alt="">
  <img class="h-24 w-24 object-cover mt-2"  src="https://meme.eq8.eu/take-my-money.gif" alt="">


  <div class="mt-8 flex gap-2">
    <img class="h-24 w-24 object-cover"  src="images/me.jpg" alt="Myself haha">
    <img class="h-24 w-24 object-cover"  src="https://meme.eq8.eu/excelent.jpg" alt="">
    <img class="h-24 w-24 object-cover"  src="https://meme.eq8.eu/take-my-money.gif" alt="">
  </div>

  <div class="mt-8 flex gap-2  [&_img]:h-24 [&_img]:w-24 [&_img]:object-cover">
    <img src="images/me.jpg" alt="Myself haha">
    <img src="https://meme.eq8.eu/excelent.jpg" alt="">
    <img src="https://meme.eq8.eu/take-my-money.gif" alt="">
  </div>

  <div class="my-5 text-xl text-green-500 animate-spin inline-block">Important</div>

  <div class="my-52 border-2"></div>

  <p>hi again</p>
  <p>ahoj</p>
  <p>ola</p>

  <h1 class="text-3xl text-red-600">HI</h1>

  <figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800">
    <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="images/me.jpg" alt="" width="384" height="512">
    <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
      <blockquote>
        <p class="text-lg font-medium">
          “Tailwind CSS is the only framework that I've seen scale
          on large teams. It’s easy to customize, adapts to any design,
          and the build size is tiny.”
        </p>
      </blockquote>
      <figcaption class="font-medium">
        <div class="text-sky-500 dark:text-sky-400">
          Sarah Dayan
        </div>
        <div class="text-slate-700 dark:text-slate-500">
          Staff Engineer, Algolia
        </div>
      </figcaption>
    </div>
  </figure>



</body>
</html>

VUE JS

Adam uses Vue.js in his projects to demonstrate how to do things like dropdown

so here is setup Tailwind + VueJS based on Vue CDN quickstart

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <title>Tailwind CSS Demo supported by Vue.js</title>
</head>
<body>
  <h1 class="text-3xl font-bold underline mb-5">
    Tailwind CSS Demo
  </h1>

 

  <div class="text-xl mt-2">{{ message }}</div>

  <script>
    const { createApp, ref } = Vue

    createApp({
      setup() {
        const message = ref('Hello vue!')
        return {
          message
        }
      }
      
    }).mount('body')
  </script>
</body>
</html>