tailwind css_使用Tailwind CSS重新创建Spotify相册页面

最新推荐文章于 2024-08-28 09:14:43 发布

culiu9261

最新推荐文章于 2024-08-28 09:14:43 发布

阅读量459

点赞数

文章标签： java python css html js ViewUI

原文链接：https://scotch.io/tutorials/recreate-the-spotify-album-page-with-tailwind-css

版权

tailwind css

Tailwind CSS is an awesome tool that changes the way we write our HTML and CSS. Tailwind is a "utility-first CSS framework" that I initially wasn't sure about. Our HTML gets pretty busy when using Tailwind, but I've found it's not that bad of a tradeoff.

Tailwind CSS是一个很棒的工具，它可以改变我们编写HTML和CSS的方式。 Tailwind是我最初不确定的“实用程序优先CSS框架”。使用Tailwind时，我们HTML变得非常繁忙，但是我发现这并不是一个不好的折衷。

The more I have used Tailwind, the more I have liked it. It lets me design my UI quicker than ever before. People say that CSS frameworks will make you not know the underlying CSS. With Tailwind, I believe you need to know your CSS even better to be able to use the utility classes.

我使用Tailwind的次数越多，我越喜欢它。它使我可以比以往更快地设计UI。人们说CSS框架会让您不了解底层CSS。使用Tailwind，我相信您需要更好地了解CSS才能使用实用程序类。

Let's recreate something with Tailwind so that we can practice.

让我们用Tailwind重新创建一些东西，以便我们进行练习。

我们将建立什么 ( What We'll Build )

I've found some things around the web to rebuild with Tailwind. For this article, we'll build Spotify's album page UI.

我在网上发现了一些要用Tailwind重建的东西。对于本文，我们将构建Spotify的相册页面UI。

We tried building this on a Twitch stream. Check out the stream to see us trying this live!

我们尝试在Twitch流上构建它。查看信息流，看看我们如何现场直播！

Here's the final CodePen:

这是最终的CodePen ：

Let's get started! Here's the overall outline:

让我们开始吧！这是总体轮廓：

< div >

    <!-- header -->

    <!-- action buttons -->

    <!-- song list -->

</ div >

标题 ( The Header )

We'll build out the header first. We'll use a containing div and two children divs.

我们将首先构建标题。我们将使用一个包含div和两个子div。

<!-- header -->
< div class = " flex " >
  < img src = " https://placekitten.com/g/200/200 " >

  < div >
    <!-- content -->
    < h4 > Playlist </ h4 >
    < h1 > MIDDLE CHILD Radio </ h1 >

    < p > With J. Cole, Quavo, Ty Dollar $ign </ p >
    < p > Created by < a > Spotify </ a > - 50 songs, 3 hr 2 min </ p >
  </ div >
</ div >

We have set a class of flex so that the image and the content can sit side by side.

我们设置了flex类，以便图像和内容可以并排放置。

Let's style the image. We'll only need to add a margin to the right of it.

让我们对图像进行样式设置。我们只需要在其右边添加一个边距。

< img class = " mr-6 " src = " https://placekitten.com/g/200/200 " >

Now we can style the content. We'll use Tailwind classes to format the text with color, margins, letter-spacing (tracking), and size.

现在我们可以为内容设置样式。我们将使用Tailwind类来设置文本的颜色，边距，字母间距（跟踪）和大小。

<!-- header -->
< div class = " flex " >
  < img class = " mr-6 " src = " https://placekitten.com/g/200/200 " >

  < div class = " flex flex-col justify-center " >
    <!-- content -->
    < h4 class = " mt-0 mb-2 uppercase text-gray-500 tracking-widest text-xs " > Playlist </ h4 >
    < h1 class = " mt-0 mb-2 text-white text-4xl " > MIDDLE CHILD Radio </ h1 >

    < p class = " text-gray-600 mb-2 text-sm " > With J. Cole, Quavo, Ty Dollar $ign </ p >
    < p class = " text-gray-600 text-sm " > Created by < a > Spotify </ a > - 50 songs, 3 hr 2 min </ p >
  </ div >
</ div >

Our header content will look like so:

我们的标题内容将如下所示：

动作按钮 ( Action Buttons )

Let's build out our action buttons now. We need our buttons and the "Followers" area to sit on the left and the right. We'll use flexbox and justify-content: space-between to achieve this.

让我们现在构建动作按钮。我们需要按钮和“跟随者”区域分别位于左侧和右侧。我们将使用flexbox和justify-content: space-between来实现这一点。

Here's the HTML for our action buttons:

这是操作按钮HTML：

<!-- action buttons -->
< div class = " mt-6 flex justify-between " >
  < div >
    < button > Play </ button >
    < button > < img src = " https://image.flaticon.com/icons/svg/2485/2485986.svg " height = " 25 " width = " 25 " > </ button >
    < button > ... </ button >
  </ div >

  < div >
    < h5 > Followers </ h5 >
    < p > 5,055 </ p >
  </ div >
</ div >

We've added some margin and set our two sections to sit on the left and the right using: mt-6 flex justify-between.

我们添加了一些边距，并使用以下命令将我们的两个部分设置为位于左侧和右侧： mt-6 flex justify-between 。

播放按钮 (Play Button)

We can style the Play button now:

我们现在可以设置“播放”按钮的样式：

< button class = " mr-2 bg-green-500 text-green-100 block py-2 px-8 rounded-full " > Play </ button >

This will give us a play button similar to Spotify's.

这将为我们提供一个类似于Spotify的播放按钮。

心形按钮 (Heart Button)

Here is the heart button:

这是心形按钮：

< button class = " mr-2 border border-white block p-2 rounded-full " >
    < img src = " https://image.flaticon.com/icons/svg/2485/2485986.svg " height = " 25 " width = " 25 " >
</ button >

追随者科 (Followers Section)

We'll style the followers section with some of Tailwind's text formatting.

我们将使用Tailwind的一些文本格式来设置Followers部分的样式。

< div class = " text-gray-600 text-sm tracking-widest text-right " >
  < h5 class = " mb-1 " > Followers </ h5 >
  < p > 5,055 </ p >
</ div >

整个操作按钮部分 (The Entire Action Buttons Section)

Here is the entire action buttons section.

这是整个操作按钮部分。

<!-- action buttons -->
< div class = " mt-6 flex justify-between " >
  < div class = " flex " >
    < button class = " mr-2 bg-green-500 text-green-100 block py-2 px-8 rounded-full " > Play </ button >
    < button class = " mr-2 border border-white block p-2 rounded-full " > < img src = " https://image.flaticon.com/icons/svg/2485/2485986.svg " height = " 25 " width = " 25 " > </ button >
    < button class = " mr-2 border border-white block p-2 rounded-full " > ... </ button >
  </ div >
  < div class = " text-gray-600 text-sm tracking-widest text-right " >
    < h5 class = " mb-1 " > Followers </ h5 >
    < p > 5,055 </ p >
  </ div >
</ div >

Here's what it all looks like now:

这是现在的样子：

歌曲组 ( The Songs Section )

In the songs section, we have what looks like a <table>. Whenever coding, I do my best to avoid creating <table>s. This is because tables have their own formatting that is sometimes hard to override. Tables are also not the easiest to work with for responsive and mobile.

在歌曲部分，我们有一个<table>外观。每当进行编码时，我都会尽力避免创建<table> 。这是因为表具有自己的格式，有时难以覆盖。对于响应式和移动式表，表也不是最容易使用的。

We'll create a few divs with columns to recreate Spotify's list. We'll start with the heading section. This section has the following:

我们将使用列创建一些div以重新创建Spotify的列表。我们将从标题部分开始。本节包含以下内容：

Spot for a play button
点选播放按钮
Spot for a heart button
心形按钮现货
Title
标题
Artist
艺术家
Album
专辑
Time
时间

Here's the HTML and styling for it:

这是它HTML和样式：

<!-- song list header -->
< div class = " flex text-gray-600 " >
  < div class = " p-2 w-8 flex-shrink-0 " > </ div >
  < div class = " p-2 w-8 flex-shrink-0 " > </ div >
  < div class = " p-2 w-full " > Title </ div >
  < div class = " p-2 w-full " > Artist </ div >
  < div class = " p-2 w-full " > Album </ div >
  < div class = " p-2 w-12 flex-shrink-0 text-right " > ⏱ </ div >
</ div >

The interesting part of this is how we are sizing with flexbox. We are creating specific widths for the first two columns and the final column. This is because these columns are supposed to be smaller; only an icon will be in these columns.

有趣的部分是我们如何使用flexbox调整大小。我们正在为前两列和最后一列创建特定的宽度。这是因为这些列应该较小。这些列中只会有一个图标。

We set a width and make sure it stays at that width with flex-shrink-0. flex-shrink is a way to tell flexbox to shrink or not.

我们设置一个宽度，并使用flex-shrink-0确保它保持在该宽度上。 flex-shrink是一种告诉flexbox收缩与否的方法。

We are setting Title, Artist, and Album to w-full. This means that flexbox will let these three columns take up equal space.

我们将“标题”，“艺术家”和“专辑”设置为w-full 。这意味着flexbox将让这三列占据相等的空间。

单曲 (Single Song)

The last part of this is to create a single song. We are using a lot of the same styles as the header. We are also adding a border to the bottom of each song.

这的最后一部分是创建一首歌曲。我们使用了许多与标题相同的样式。我们还在每首歌曲的底部添加了边框。

< div class = " flex border-b border-gray-800 hover:bg-gray-800 " >
  < div class = " p-3 w-8 flex-shrink-0 " > ▶️ </ div >
  < div class = " p-3 w-8 flex-shrink-0 " > ❤️ </ div >
  < div class = " p-3 w-full " > My Song Here </ div >
  < div class = " p-3 w-full " > Eminem </ div >
  < div class = " p-3 w-full " > Spotify </ div >
  < div class = " p-3 w-12 flex-shrink-0 text-right " > 5:35 </ div >
</ div >

Copy this row a bunch of times and we have our final product!

复制此行很多次，我们便有了最终产品！

结论 ( Conclusion )

While this isn't a 1 to 1 copy of Spotify, it shows how far we can get with just the default Tailwind classes. We didn't have to write any custom CSS!

虽然这不是Spotify的1对1副本，但它显示了仅使用默认的Tailwind类可以达到的效果。我们不必编写任何自定义CSS！

Check out our other Tailwind Recreate articles:

查看我们的其他Tailwind Recreate文章：

Hope you liked this Tailwind tutorial. Let us know if you want more Tailwind content.

希望您喜欢这个Tailwind教程。让我们知道是否需要更多Tailwind内容。