tailwind css_如何使用Tailwind CSS构建样式化的登陆页面

最新推荐文章于 2024-05-24 01:00:03 发布

cukw6666

最新推荐文章于 2024-05-24 01:00:03 发布

阅读量1.7k

点赞数

文章标签： css html java github bootstrap ViewUI

原文链接：https://www.digitalocean.com/community/tutorials/build-a-beautiful-landing-page-with-tailwind-css

版权

tailwind css

介绍 (Introduction)

Developers use Cascading Style Sheets (CSS) to style websites. But often, when building large websites or apps, it becomes tedious to write these rules from scratch. This is why there are multiple CSS frameworks to help make writing CSS easy, such as Bootstrap, Foundation, Bulma, Pure, Materialize, etc.

开发人员使用级联样式表(CSS)对网站进行样式设置。但是通常，在构建大型网站或应用程序时，从头开始编写这些规则变得很繁琐。这就是为什么存在多个CSS框架来帮助简化CSS编写的原因，例如Bootstrap ， Foundation ， Bulma ， Pure ， Materialize等。

Tailwind CSS is a framework that is somewhat different from the ones previously mentioned, because it doesn’t have a default theme, and there are no built-in UI components. Tailwind is a utility-first CSS framework for rapidly building custom user interfaces. This means that if you’re looking for a framework with a menu of predesigned widgets to build your site with, Tailwind might not be the right framework for you. Instead, Tailwind provides highly composable, low-level utility classes that make it easier to build complex user interfaces without encouraging any two sites to look the same.

Tailwind CSS是一个与前面提到的框架略有不同的框架，因为它没有默认主题，并且没有内置的UI组件。 Tailwind是实用程序优先CSS框架，用于快速构建自定义用户界面。这意味着，如果您正在寻找带有预先设计的小部件菜单的框架来构建站点，那么Tailwind可能不是您合适的框架。取而代之的是，Tailwind提供了高度可组合的低级实用程序类，这些类使构建复杂的用户界面更加容易，而无需鼓励任何两个站点看起来都相同。

In this tutorial, you’ll build a landing page to showcase a smart health monitoring wristwatch (SHMW) product to customers.

在本教程中，您将构建一个登录页面，以向客户展示智能健康监控手表(SHMW)产品。

The final product will look like the following:

最终产品将如下所示：

The landing page will be divided into the following:

登陆页面将分为以下几部分：

Navbar
导航栏
Hero section
英雄节
Features section
功能部分
Testimonials
感言
Call to action
呼吁采取行动
Footer
页脚

You can download the assets for this project at this GitHub page.

您可以在此GitHub页面上下载该项目的资产。

先决条件 (Prerequisites)

A basic understanding of CSS may be helpful, but is not required.

对CSS的基本了解可能会有所帮助，但不是必需的。

第1步-设置项目 (Step 1 — Setting up the Project)

We’ll start by creating a new project directory, which we’ll call shmw and create an index.html file inside it.

我们将从创建一个新的项目目录开始，我们将其称为shmw并在其中创建一个index.html文件。

mkdir shmw
mkdir shmw
cd shmw
cd shmw
nano index.html
纳米index.html

To get up and running quickly with Tailwind CSS, we’ll grab the latest default configuration build via CDN (Content Delivery Network). Add the following snippet to index.html:

为了使用Tailwind CSS快速启动并运行，我们将通过CDN(内容交付网络)获取最新的默认配置。将以下代码段添加到index.html ：

index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Smart Health Monitoring Wristwatch</title>
      <link rel="stylesheet" href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" />
      <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700" rel="stylesheet" />
      <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body class="text-gray-700 bg-white" style="font-family: 'Source Sans Pro', sans-serif">

    </body>
    </html>

In this snippet, you gave the body a white background and pulled the Source Sans Pro font from Google Fonts.

在此代码段中，您为正文提供了白色背景，并从Google字体中提取了Source Sans Pro字体。

Note: Many of the features of Tailwind CSS are not available using the CDN builds. To take full advantage of Tailwind CSS features, install Tailwind via npm.

注意：使用CDN构建时，Tailwind CSS的许多功能不可用。要充分利用Tailwind CSS功能，请通过npm安装Tailwind。

The navbar will be divided into two columns. The first column will hold the logo and the second column will hold the navigation links. Add the following code immediately after <body> in the index.html file:

导航栏将分为两列。第一列将包含徽标，第二列将包含导航链接。在index.html文件中的<body>之后立即添加以下代码：

index.html

<nav>
      <div class="container mx-auto px-6 py-2 flex justify-between items-center">
        <a class="font-bold text-2xl lg:text-4xl" href="#">
          SHMW
        </a>
        <div class="block lg:hidden">
          <button class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-600 hover:text-gray-800 hover:border-teal-500 appearance-none focus:outline-none">
            <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <title>Menu</title>
              <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
            </svg>
          </button>
        </div>
        <div class="hidden lg:block">
          <ul class="inline-flex">
            <li><a class="px-4 font-bold" href="/">Home</a></li>
            <li><a class="px-4 hover:text-gray-800" href="#">About</a></li>
            <li><a class="px-4 hover:text-gray-800" href="#">Contact</a></li>
          &l

最低0.47元/天解锁文章

cukw6666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tailwind css_如何使用Tailwind CSS构建样式化的登陆页面

tailwind css 介绍 (Introduction)Developers use Cascading Style Sheets (CSS) to style websites. But often, when building large websites or apps, it becomes tedious to write these rules from scratch. Thi...
复制链接

扫一扫