02 【TailWind CSS 初体验】

DSelegent

已于 2022-08-28 22:17:44 修改

阅读量175

点赞数 1

分类专栏： TailWind CSS学习笔记文章标签： css 前端 html

于 2022-08-16 12:49:03 首次发布

本文链接：https://blog.csdn.net/DSelegent/article/details/126363921

版权

TailWind CSS学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.Tailwind CSS 初体验

经过上一篇 Tailwind CSS 的学习，现在已经安装好了，万事俱备，只欠东风。这篇文章不往后学习，先来找找成就感!，体验一把 Tailwind CSS 的案例。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../dist/output.css" />
  </head>
  <body>
    <div class="text-gray-600">
      <header class="mb-5">
        <div class="bg-gray-700 p-4 text-white">Hello world</div>
      </header>
      <main class="container mx-auto">
        <div class="text-center text-5xl">Hello TailWind CSS</div>
        <hr class="my-5" />
        <div class="flex justify-center">
          <a href="./showTwo.html" target="_blank">
            <img
              src="https://www.ziruchu.com/uploads/slideshow/2019061744096.png"
              class="shadow-lg border-2 border-sky-500 my-5 align-middle"
            />
          </a>
        </div>
      </main>
      <footer class="mt-5">
        <div class="bg-gray-300 p-4 text-black">你好，TailWind CSS。</div>
      </footer>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../dist/output.css" />
  </head>
  <body>
    <h1 class="text-lg font-bold tracking-widest uppercase">TailWind CSS</h1>
    <div
      class="leading-9 text-center bg-yellow-500 w-1/2 h-1/3 p-5 my-10 border-2 border-solid border-pink-500 opacity-40 shadow-2xl"
    >
      <p>hello tailwind css</p>
    </div>
    <input type="text" class="border border-pink-500 rounded-lg outline-0 focus:border-blue-500" />
    <div class="md:flex md:flex-wrap m-5">
      <div class="bg-orange-500 p-5 md:w-1/3 md:bg-red-600">Laravel</div>
      <div class="bg-blue-500 p-5 md:w-1/3">Tailwind CSS</div>
      <div class="bg-pink-500 p-5 md:w-1/3">Livewire</div>
    </div>
  </body>
</html>