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. 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 ：
Smart Health Monitoring Wristwatch
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。
第2步-构建导航栏 (Step 2 — Building the Navbar)
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 in the index.html file:
导航栏将分为两列。 第一列将包含徽标，第二列将包含导航链接。 在index.html文件中的之后立即添加以下代码：
Adding .container sets the max-width of an element to match the min-width of the current breakpoint. To make the container centered, you add .mx-auto and .px-6 to have padding on both sides (left and right). Since we want a horizontal navbar, we set the container display to flex and specify how its items should be displayed. Each item should have an equal amount of space between them (using .justify-between), which will push both columns to the edge. They will be vertically centered (using .items-center). Lastly, we add padding to both the top and bottom of the container using .py-2.
添加.container设置元素的max-width以匹配当前断点的min-width 。 若要使容器居中，请添加.mx-auto和.px-6以在两侧(左侧和右侧)都具有填充。 由于我们需要水平导航栏，因此我们将容器显示设置为flex并指定应如何显示其项目。 每个项目之间都应有相等的空间(使用.justify-between )，这会将两列都推到边缘。 它们将垂直居中(使用.items-center )。 最后，我们使用.py-2将填充添加到容器的顶部和底部。
The first column holds our business logo (in this case, just text) on the navbar. For the second column, we want the links to be displayed differently on mobile and desktop. We have a div containing a button for our mobile menu, which will only be visible on small screen devices. To achieve this, we add both .block and .lg:hidden, which will make the button visible on mobile devices and hidden on large screens.
第一列在导航栏上包含我们的公司徽标(在本例中为文本)。 对于第二列，我们希望链接在移动设备和台式机上的显示方式有所不同。 我们有一个div其中包含用于移动菜单的按钮，该按钮仅在小屏幕设备上可见。 为此，我们同时添加了.block和.lg:hidden ，这将使按钮在移动设备上可见，而在大屏幕上隐藏。
Note: By default, Tailwind CSS takes a mobile-first approach, so we build it from a small screen to a larger screen.
注意：默认情况下，Tailwind CSS采用移动优先方式，因此我们将其从小屏幕扩展到大屏幕。
Next, for the desktop links, we add .hidden and .lg:block, which we do the direct inverse of the above. For the actual links, we add .inline-flex to make the links appear horizontal. For individual links, we give them padding on both sides. To indicate the active link (in our case, the home link), we make the text bold. For the rest of the links, we use a darker shade of gray once the links are hovered over.
接下来，对于桌面链接，我们添加.hidden和.lg:block ，这是我们做上述的直接逆。 对于实际的链接，我们添加.inline-flex以使链接显示为水平。 对于单独的链接，我们在它们的两侧都添加了填充。 为了指示活动链接(在本例中为首页链接)，我们将文本加粗。 对于其余的链接，将鼠标悬停在链接上时，我们会使用较深的灰色阴影。
第3步-建立英雄区 (Step 3 — Building the Hero Section)
The Hero section will display information about our smart health monitoring wristwatch and a call to action button for the users to take immediate action. Add this code snippet immediately after the navbar:
“英雄”部分将显示有关我们的智能健康监控手表的信息以及号召性用语按钮，以使用户立即采取行动。 在导航栏后立即添加以下代码段：
Smart Health Monitoring Wristwatch!
Monitor your health vitals smartly anywhere you go.
We start by adding padding to both the top and bottom, and then we set a background gradient. For the call to action button, we give it a white background color, make the text bold, give it some padding, and make it pill-shaped by giving it fully rounded borders. Lastly, we give it some shadow and make the text uppercase.
我们首先在顶部和底部添加填充，然后设置背景渐变。 对于号召性用语按钮，我们给它提供白色背景色，使文本加粗，给其添加一些填充，并通过给其完全圆形的边框使其呈药丸状。 最后，我们给它一些阴影并使文本大写。
Now that you’ve made the hero section, you’re ready to build the features section.
现在，您已经完成了英雄部分，您可以准备构建功能部分。
步骤4 —构建功能部件部分 (Step 4 — Building the Features Section)
In this step, you will build a section that will list out the notable features of the device.
在此步骤中，您将构建一个部分，列出该设备的显着功能。
Add the following immediately after the hero section:
在英雄部分之后立即添加以下内容：
Features
Exercise Metric
Our Smart Health Monitoring Wristwatch is able to capture you vitals while you exercise. You can create different category of exercises and can track your vitals on the go.
Reporting
Our Smart Health Monitoring Wristwatch can generate a comprehensive report on your vitals depending on your settings either daily, weekly, monthly, quarterly or yearly.
Syncing
Our Smart Health Monitoring Wristwatch allows you to sync data across all your mobile devices whether iOS, Android or Windows OS and also to your laptop whether MacOS, GNU/Linux or Windows OS.
The features themselves are displayed in a grid of two columns: the feature text and the accompanying image. On mobile devices, we stack on top of one another. We use flexbox to build our grid.
要素本身显示在两列的网格中：要素文本和随附的图像。 在移动设备上，我们彼此堆叠。 我们使用flexbox构建网格。
第5步-建立推荐部分 (Step 5 — Building the Testimonials Section)
In this step, you will build the testimonial section that will contain cards of some of the testimonies. The card will contain the user’s testimony and the user’s name.
在此步骤中，您将构建“见证”部分，其中将包含一些见证卡。 该卡将包含用户的证词和用户名。
Add the following immediately after the features section:
在功能部分之后立即添加以下内容：
Testimonials
Monitoring and tracking my health vitals anywhere I go and on any platform I use has never been easier.
John Doe
As an Athlete, this is the perfect product for me. I wear my Smart Health Monitoring Wristwatch everywhere I go, even in the bathroom since it's waterproof.
Jane Doe
I don't regret buying this wearble gadget. One of the best gadgets I own!.
James Doe
First, we give the section a background and center it on the page. For the actual testimonies, we make them appear in a grid with flexbox. We want them to stack (that is, take the full width of the screen) on one another when viewed on mobile devices, hence .w-full. Then, on larger screens, we want them to be displayed in three columns using .md:w-1/3. For the individual cards, we give white background, rounded borders, and shadow.
首先，我们为该部分提供背景，并将其放在页面的中心。 对于实际的见证，我们使它们出现在带有Flexbox的网格中。 在移动设备上查看时，我们希望它们彼此堆叠(即占据屏幕的整个宽度)，因此为.w-full 。 然后，在较大的屏幕上，我们希望使用.md:w-1/3将它们显示在三列中。 对于单个卡片，我们给出白色背景，圆角边框和阴影。
第6步-建立号召性用语 (Step 6 — Building the Call to Action)
The call to action section is needed so our users can take immediate action after reading the features of our product and the testimonials from the demo users. Add the following immediately after the testimonials section:
需要号召性用语部分，以便我们的用户在阅读了演示用户的产品功能和推荐后，可以立即采取措施。 在“推荐”部分之后立即添加以下内容：
Limited in Stock
Get yourself the Smart Health Monitoring Wristwatch!
Now that you’ve created the call to action, you’re ready to build the footer.
既然已经创建了号召性用语，那么就可以构建页脚了。
步骤7 —建立页脚 (Step 7 — Building the Footer)
The footer will contain extra links like a blog, privacy policy, social media, etc. Add the following immediately after the call to action section:
页脚将包含其他链接，例如博客，隐私权政策，社交媒体等。在号召性用语部分之后立即添加以下内容：
This code displays a bunch of links in a grid of four columns. Each column will stack on one another, and the text will be centered when viewed on small screens.
此代码在四列网格中显示了一堆链接。 每一列将彼此堆叠，并且在小屏幕上查看时，文本将居中。
With that, you have completed your landing page. The completed index.html file will look as follows:
这样，您就完成了登录页面。 完成的index.html文件将如下所示：
Smart Health Monitoring Wristwatch
Smart Health Monitoring Wristwatch!
Monitor your health vitals smartly anywhere you go.
Features
Exercise Metrics
Our Smart Health Monitoring Wristwatch is able to capture you vitals
while you exercise. You can create different category of exercises
and can track your vitals on the go.
Reporting
Our Smart Health Monitoring Wristwatch can generate a comprehensive
report on your vitals depending on your settings either daily,
weekly, monthly, quarterly or yearly.
Syncing
Our Smart Health Monitoring Wristwatch allows you to sync data
across all your mobile devices whether iOS, Android or Windows OS
and also to your laptop whether MacOS, GNU/Linux or Windows OS.
Testimonials
Monitoring and tracking my health vitals anywhere I go and on
any platform I use has never been easier.
John Doe
As an Athlete, this is the perfect product for me. I wear my
Smart Health Monitoring Wristwatch everywhere I go, even in the
bathroom since it's waterproof.
Jane Doe
I don't regret buying this wearble gadget. One of the best
gadgets I own!.
James Doe
Limited in Stock
Get yourself the Smart Health Monitoring Wristwatch!
结论 (Conclusion)
In this tutorial, you built a landing page with Tailwind CSS. In addition to using the classes that Tailwind provides, you also used gradient colors to make the landing page have more depth. To learn more about Tailwind CSS, you can read the documentation on their official website.
在本教程中，您使用Tailwind CSS构建了登录页面。 除了使用Tailwind提供的类之外，您还使用了渐变颜色来使登录页面具有更大的深度。 要了解有关Tailwind CSS的更多信息，您可以阅读其官方网站上的文档 。
翻译自: https://www.digitalocean.com/community/tutorials/build-a-beautiful-landing-page-with-tailwind-css
tailwind css