Tailwind CSS 代码 DEMO

现在，您可以像其他样式表一样将此文件引入到 HTML 中：

<!doctype html>
<html>
<head>
  <!-- ... -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="/tailwind.css" rel="stylesheet">
</head>
<body>
  <!-- ... -->
</body>
</html>


<!doctype html>
<html>
<head>
  <!-- ... -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="/tailwind.css" rel="stylesheet">
</head>
<body>
  <!-- ... -->
</body>
</html>

https://www.tailwindcss.cn/docs/optimizing-for-production


<div class=”md:flex”>

<div class=”md:flex-shrink-0″>

<img class=”rounded-lg md:w-56″ src=”/img/shopping.jpg” alt=”Woman paying for a purchase”>

</div>

<div class=”mt-4 md:mt-0 md:ml-6″>

<div class=”uppercase tracking-wide text-sm text-indigo-600 font-bold”>

Marketing

</div>

<a href=”/get-started” class=”block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline”>

Finding customers for your new business

</a>

<p class=”mt-2 text-gray-600″>

Getting a new business off the ground is a lot of hard work.

Here are five ideas you can use to find your first customers.

</p>

</div>

</div>