Tailwind CSS 小案例，創建漂亮的收藏卡片列表

載說明：原創不易，未經授權，謝絕任何形式的轉載

作為人類，我們有一種天生的傾向，喜歡收集不同的物品，并根據興趣將它們分組。從郵票到書籍，人們收集和分組的物品種類繁多。定義上，收藏是一組事物，通常是由某個人創建的。例如，很多孩子會收集漫畫書，還有些人會收集獎杯等等，我相信你可以理解。在本教程中，我們將制作一組圖像，并將它們分成不同的類別。這就是它的樣子。（當然，你可以根據自己的喜好進行自定義）

理解任務：

將你的工作或設計劃分為不同的部分非常重要，我總是這樣做，它可以幫助我將其分解成較小的組件，易于構建，然后再將它們組合起來形成更大的組件。

如果你已經習慣了我的文章，你肯定知道我稱其為“分而治之”的方法

實質上，我們有兩個主要部分，為了方便引用，我們將它們稱為“收藏分類”和“收藏圖像”。

首先使用NPM的方式安裝 TailwindCSS

如果已經知道怎么安裝 TailwindCSS ，可以忽略這一小節。

原文并沒有提及安裝方式，我也嘗試了官網的建議，也沒有達到理想的效果，只能自己在那折騰，現在把安裝過程分享給大家。

1、首先建立項目文件夾，初始化項目

mkdir demo
cd demo
npm init -y

2、接下來在項目的文件夾里安裝相關依賴

npm install tailwindcss postcss-cli autoprefixer postcss-cli

3、接下來在項目文件夾里新建如下文件夾和文件

mkdir dist
cd dist
mkdir css
cd css
touch styles.css
cd ../
touch index.html

4、在此文件夾中創建一個新的Tailwind CSS配置文件：

npx tailwindcss init

這將在項目根目錄創建一個名為“tailwind.config.js”的文件，其中包含一些默認配置，我們需要修改content的內容，如下所示：

module.exports = {
  content: ['./dist/**/*.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

5、接下來我們在項目的根目里新建個 tailwind.css 文件，文件名你可以隨意

touch tailwind.css

然后在空白的文件里，添加如下代碼：

@tailwind base;
@tailwind components;
@tailwind utilities;

6、最后回到 index.html 文件，編寫如下代碼，注意CSS的引用。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mini Project</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body class="bg-red-500 flex items-center justify-center min-h-screen">
<h1 class="text-3xl text-white ">歡迎來到前端達人</h1>
</body>
</html>

7、最后配置 package.json 文件，主要是這部分的修改

 "scripts": {
    "build": "postcss tailwind.css -o dist/css/styles.css",
    "watch": "postcss tailwind.css -o dist/css/styles.css --watch"
  }

8、最后運行 npm run build ，打開index.html ，一切正常的話就會看到如下效果。

代碼結構：

正如我經常說的那樣，當設計組件時，我總是采用相同的結構。因為我相信它們在某種程度上有相同的基礎。

具體結構如下：

<body>
  <!-- 第一層 -->
  <div>
    <!-- 第二層 -->
    <div>
      <!-- 收藏分類 -->
      <div></div>

      <!-- 收藏圖像 -->
      <div></div>
    </div>
  </div>
</body>

收藏分類：

正如我們之前商量的那樣，我們將不同的部分分別稱為“收藏分類”和“收藏圖像”。

現在，我們來看看“收藏分類”的細節。

<!-- 收藏分類 -->
<div>
  <!-- 標題 -->
  <div class="text-4xl font-bold">
    <h2>Popular Collections</h2>
  </div>

  <!-- 不同的分類 -->
  <div class="hidden md:flex items-center gap-4 mt-4 mb-8 [&>*]:bg-white [&>*]:px-4 [&>*]:py-2 [&>*]:rounded-lg [&>*:hover]:bg-slate-900 [&>*:hover]:text-white [&>*]:cursor-pointer">
    <div>
      <h2>Profile</h2>
    </div>
    <div>
      <h2>New York</h2>
    </div>
    <div>
      <h2>Relaxing</h2>
    </div>
    <div>
      <h2>Person</h2>
    </div>
    <div>
      <h2>Fashion</h2>
    </div>
  </div>
</div>

讓我們理解這個小小的代碼片段。

標題：對于標題，我們僅僅設置了一個 text-4xl 的字體大小，并加粗了字體，使用了 font-semibold。簡單明了，不是嗎？

不同的分類：你還記得 [&>] 的威力嗎？它的意思是從父元素中選擇所有直接子元素，并對其應用此樣式。所以，對于每個分類子元素，我們分別設置了 px-4 的內聯內邊距、py-2 的塊內內邊距，給它添加了圓角邊框（rounded-lg），并使用 [&>:hover] 添加了一些懸停效果。

至此，我們可以說第一部分已經完成了。繼續往下看。

收藏圖像：

這個部分實際上有 3 個相同結構的收藏集合，但是內容（分類）不同。因此，如果我們構建其中一個，只需要復制并更改內容即可創建其他的。

收藏集合元素

<div class="w-full max-w-[20rem] p-6 bg-white rounded-2xl">
  <!-- 圖片 -->
  <div>
    <img src="https://thumbs.dreamstime.com/b/asian-chinese-man-holiday-wearing-summer-shirt-over-isolated-yellow-background-smiling-love-showing-heart-symbol-shape-212738466.jpg" alt="" class="h-40 w-full rounded-3xl object-cover object-center cursor-pointer hover:scale-105 hover:-rotate-3">
  </div>

  <!-- 分類列表 -->
  <div class="flex items-center py-4 justify-between [&>*]:mx-2 [&>*>img]:h-20 [&>*>img]:aspect-square [&>*>img]:object-cover [&>*>img]:object-center [&>*>img]:rounded-xl [&>*>img:hover]:scale-110 [&>*>img:hover]:-rotate-12 [&>*>img]:cursor-pointer">
    <div>
      <img src="https://images.prismic.io/ddhomepage/9643a4bb-cc11-468e-8441-36e67308a6aa_people-main-image.jpg?auto=compress,format&rect=0,0,570,684&w=570&h=684&fit=clip&cs=srgb" alt="">
    </div>
    <div>
      <img src="https://media.istockphoto.com/id/1167770957/photo/indian-man-on-vacation-wearing-floral-shirt-hat-sunglasses-over-isolated-yellow-background.jpg?b=1&s=170667a&w=0&k=20&c=gX1Sd-0BL2kACkdcQNlgCjj98M_1jhdnSt3UeXQm97s=" alt="">
    </div>
    <div>
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRna0Yn_AMMEcnVGFuHNG0-UENJAFjsGKO8RQ&usqp=CAU" alt="">
    </div>
  </div>

  <!-- 分類名稱 -->
  <div class="flex items-center justify-between">
    <h2>People</h2>
    <div class="flex items-center justify-center gap-1 cursor-pointer">
      <div class="text-2xl">
        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
          <path fill="currentColor" d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14L6 17h12l-3.86-5.14z" />
        </svg>
      </div>
      <p class="text-sm">144</p>
    </div>
  </div>
</div>

所以這就是每個“收藏品”元素的外觀。當然，你可以將圖片源更改為你的收藏圖片。更好的是，你可以完全重新設計收藏品元素以符合你的喜好。這樣更有趣

對于其他兩個收藏品元素，基本上是相同的，只是圖片來源不同。

<!-- Collection-Images -->
<div class="flex items-center gap-4 flex-wrap">

<!-- First Collection Element -->
   <div class="w-full max-w-[20rem] p-6 bg-white rounded-2xl">
    <div>
     <img src="https://thumbs.dreamstime.com/b/asian-chinese-man-holiday-wearing-summer-shirt-over-isolated-yellow-background-smiling-love-showing-heart-symbol-shape-212738466.jpg" alt="" class="h-40 w-full rounded-3xl object-cover object-center cursor-pointer hover:scale-105 hover:-rotate-3">
     </div>
      <div class="flex items-center py-4 justify-between [&>*]:mx-2 [&>*>img]:h-20 [&>*>img]:aspect-square [&>*>img]:object-cover [&>*>img]:object-center [&>*>img]:rounded-xl [&>*>img:hover]:scale-110 [&>*>img:hover]:-rotate-12 [&>*>img]:cursor-pointer">
         <div>
           <img src="https://images.prismic.io/ddhomepage/9643a4bb-cc11-468e-8441-36e67308a6aa_people-main-image.jpg?auto=compress,format&rect=0,0,570,684&w=570&h=684&fit=clip&cs=srgb" alt="">
          </div>
          <div>
            <img src="https://media.istockphoto.com/id/1167770957/photo/indian-man-on-vacation-wearing-floral-shirt-hat-sunglasses-over-isolated-yellow-background.jpg?b=1&s=170667a&w=0&k=20&c=gX1Sd-0BL2kACkdcQNlgCjj98M_1jhdnSt3UeXQm97s=" alt="">
           </div>
           <div>
             <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRna0Yn_AMMEcnVGFuHNG0-UENJAFjsGKO8RQ&usqp=CAU" alt="" >
           </div>
 </div>
    
     <div class="flex items-center justify-between">
         <h2>People</h2>
         <div class="flex items-center justify-center gap-1 cursor-pointer">
         <div class="text-2xl">
         <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                                    preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
                                    <path fill="currentColor"
                                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14L6 17h12l-3.86-5.14z" />
          </svg>
      </div>
         <p class="text-sm">144</p>
        </div>
     </div>
        
</div>
        <!-- Second Collection Element -->
  <div class="w-full max-w-[20rem] p-6 bg-white rounded-2xl">
       <div>
         <img src="https://www.celebritycruises.com/blog/content/uploads/2022/01/most-beautiful-mountains-in-the-world-kirkjufell-iceland-1024x580.jpg" alt="" class="h-40 w-full rounded-3xl object-cover object-center cursor-pointer hover:scale-105 hover:-rotate-3">
        </div>
        <div class="flex items-center py-4 justify-between [&>*]:mx-2 [&>*>img]:h-20 [&>*>img]:aspect-square [&>*>img]:object-cover [&>*>img]:object-center [&>*>img]:rounded-xl [&>*>img:hover]:scale-110 [&>*>img:hover]:-rotate-12 [&>*>img]:cursor-pointer">
          <div>
             <img src="https://www.hostelworld.com/blog/wp-content/uploads/2018/12/kirkjufell-1313x875.jpg" alt="">
          </div>
          <div>
             <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSlah-eof7BDtWTo1gtz8F6Xe3z341c-yv-oc25SHzksBzDv-QPGMVpqn0omwvEvHYQ0OU&usqp=CAU" alt="">
           </div>
            <div>
              <img src="https://cdn.europosters.eu/image/750/posters/aurora-borealis-i47499.jpg" alt="" >
            </div>
       </div>
    
     <div class="flex items-center justify-between">
        <h2>Nature</h2>
        <div class="flex items-center justify-center gap-1 cursor-pointer">
         <div class="text-xl">
         <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                                    preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
                                    <path fill="currentColor"
                                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14L6 17h12l-3.86-5.14z" />
          </svg>
        </div>
        <p class="text-sm">7k</p>
       </div>
    </div>
    
  </div>
    <!-- Third Collection Element -->
<div class="w-full max-w-[20rem] p-6 bg-white rounded-2xl">
    <div>
    <img src="https://www.holidify.com/images/cmsuploads/compressed/Taj_Mahal_20180814141729.png" alt="" class="h-40 w-full rounded-3xl object-cover object-center cursor-pointer hover:scale-105 hover:-rotate-3">
     </div>
     <div class="flex items-center py-4 justify-between [&>*]:mx-2 [&>*>img]:h-20 [&>*>img]:aspect-square [&>*>img]:object-cover [&>*>img]:object-center [&>*>img]:rounded-xl [&>*>img:hover]:scale-110 [&>*>img:hover]:-rotate-12 [&>*>img]:cursor-pointer">
     <div>
      <img src="https://abtoi.com/wp-content/uploads/2020/02/Famous-monuments-in-Italy-colosseum-scaled.jpg" alt="">
      </div>
      <div>
        <img src="https://www.crtv.cm/wp-content/uploads/2022/04/0BE1E695-A727-4A0A-ACDA-F7B47587892A.jpeg" alt="">
       </div>
       <div>
           <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSQ6sHVW_qhWwGbinzhVWWYRLq_SvlE6JfrsQ&usqp=CAU" alt="" >
       </div>
 </div>
    
<div class="flex items-center justify-between">
     <h2>History</h2>
     <div class="flex items-center justify-center gap-1 cursor-pointer">
      <div class="text-xl">
      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                                    preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
                                    <path fill="currentColor"
                                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14L6 17h12l-3.86-5.14z" />
        </svg>
       </div>
       <p class="text-sm">431</p>
     </div>
   </div>
</div>
        
        
        
 </div>

那應該一切都好！

結束

我們剛剛使用了驚人的圖像構建了一個驚人的收藏品列表組件，而且這一切都是不需要打開 CSS 文件的。感謝 Tailwindcss。

許多雇主都需要在他們的網站上添加這樣的組件，而現在你應該感到自豪，因為你是那些可以在不到5分鐘內構建它的少數人之一，而且你可以在不離開 HTML 文檔的情況下完成它。

你可以在 Codepen 上獲得實時預覽。

https://codepen.io/mbianou-bradon/pen/JjBYBdr

在文章結尾，我想提醒您，文章的創作不易，如果您喜歡我的分享，請別忘了點贊和轉發，讓更多有需要的人看到。同時，如果您想獲取更多前端技術的知識，歡迎關注「前端達人」，您的支持將是我分享最大的動力。我會持續輸出更多內容，敬請期待。

原文：https://medium.com/@mbianoubradon/how-to-build-a-fully-responsive-popular-collection-list-using-tailwindcss-1aa02034fec6
作者：Mbianou Bradon
非直接翻譯，有自行改編和添加部分，翻譯水平有限，難免有疏漏，歡迎指正

文由ScriptEcho平臺提供技術支持

項目地址：傳送門

基于 Tailwind CSS 構建響應式卡片布局

應用場景

本段代碼適用于需要創建響應式網格布局的場景，例如展示產品列表、用戶資料或任何需要靈活排列內容的情況。通過使用 Tailwind CSS，可以輕松創建可在各種設備上自適應的卡片。

代碼基本功能

這段代碼使用 Tailwind CSS 構建了一個響應式卡片布局，其中包含六張卡片，每張卡片顯示一個標題、金額和一個按鈕。卡片排列在網格中，根據屏幕尺寸自動調整大小和排列方式。

功能實現步驟及關鍵代碼分析

1. HTML 結構

<section class="container px-5 py-24 mx-auto">
  <div class="flex flex-wrap -m-4 text-center">
    <!-- 卡片容器 -->
  </div>
</section>

容器元素 <section> 包含卡片布局，它設置了容器的填充、邊距和居中對齊。
內部 <div> 使用 flexbox 布局，將卡片排列在網格中，并設置了負邊距以消除卡片之間的間隙。

2. 卡片元素

<div class="p-4 sm:w-1/2 lg:w-1/3 w-full hover:scale-105 duration-500">
  <div class="flex items-center justify-between p-4 rounded-lg bg-white shadow-indigo-50 shadow-md">
    <!-- 卡片內容 -->
  </div>
</div>

每個卡片包含一個 <div> 元素，設置了填充、邊距、圓角和陰影。
卡片內容使用 flexbox 布局，將內容水平排列。

3. 卡片內容

<h2 class="text-gray-900 text-lg font-bold">Total Ballance</h2>
<h3 class="mt-2 text-xl font-bold text-yellow-500 text-left">+ 150.000 ?</h3>
<p class="text-sm font-semibold text-gray-400">Last Transaction</p>
<button class="text-sm mt-6 px-4 py-2 bg-yellow-400 text-white rounded-lg tracking-wider hover:bg-yellow-300 outline-none">Add to cart</button>

卡片內容包括一個標題、金額、描述和一個按鈕。
標題使用 <h2> 元素，設置了字體大小和粗細。
金額使用 <h3> 元素，設置了字體大小、粗細和文本對齊。
描述使用 <p> 元素，設置了字體大小和顏色。
按鈕使用 <button> 元素，設置了樣式和文本。

4. 響應式設計

@media (min-width: 640px) {
  .sm\:w-1/2 {
    width: 50%;
  }
}

@media (min-width: 1024px) {
.lg:w-1/3 {
width: 33.33%;
}
}

使用媒體查詢在不同屏幕尺寸下調整卡片的寬度。
對于中等屏幕（640px 以上），卡片寬度設置為 50%。
對于大屏幕（1024px 以上），卡片寬度設置為 33.33%。

總結與展望

開發這段代碼的過程讓我加深了對 Tailwind CSS 的理解，以及如何使用它來構建響應式布局。通過靈活的類名和媒體查詢，Tailwind CSS 允許輕松創建適應各種設備的動態界面。

未來，該卡片布局可以進一步拓展和優化，例如：

添加更多的卡片自定義選項，例如背景顏色、邊框樣式和字體選擇。
實現卡片拖放功能，允許用戶根據需要重新排列卡片。
集成后端數據，使卡片能夠動態更新和顯示實時信息。
更多組件：

獲取更多Echos

本文由ScriptEcho平臺提供技術支持

項目地址：傳送門

微信搜索ScriptEcho了解更多

者：John Mantas
使用技術：HTML / CSS (SCSS)
是否自適應：否
依賴庫：-
瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
源碼鏈接：https://codepen.io/john-mantas/full/bxmrBq

作者：George Gedox
使用技術：HTML / CSS (SCSS)
是否自適應：否
依賴庫：font-awesome.css
瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
源碼鏈接：https://codepen.io/GeorgeGedox/pen/yEwoqP

作者：Julie Park
使用技術：HTML / CSS (SCSS)
是否自適應：否
依賴庫：-
瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
源碼鏈接：https://codepen.io/juliepark/pen/aKbYVp

作者：Fatih Takey
使用技術：HTML / CSS
是否自適應：否
依賴庫：font-awesome.css
瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
源碼鏈接：https://codepen.io/fatihtakey/pen/eyyWVr

作者：Omar Dsoky
使用技術：HTML / CSS
是否自適應：否
依賴庫：font-awesome.css
瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
源碼鏈接：https://codepen.io/linux/pen/LjWrPZ

作者：SliceCrowd
使用技術：HTML / CSS
是否自適應：否
依賴庫：bootstrap.css, swiper.css
瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
源碼鏈接：https://codepen.io/slicecrowd/pen/GWJEZB

作者：Tobi Balogun
使用技術：HTML / CSS
是否自適應：否
依賴庫：ionicons.css, animate.css
瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
源碼鏈接：https://codepen.io/cupofmint/pen/wgyrRX

作者：CodeFrog
使用技術：HTML / CSS
是否自適應：否
依賴庫：font-awesome.css
瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
源碼鏈接：https://codepen.io/CodeFrogShow/pen/rWjYrP

作者：Oscar
使用技術：HTML / CSS (SCSS) / JavaScript
是否自適應：否
依賴庫：jquery.js
瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
源碼鏈接：https://codepen.io/olhilton/pen/dXaqxE

作者：Alexandra K
使用技術：HTML / CSS
是否自適應：否
依賴庫：-
瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
源碼鏈接：https://codepen.io/ff0004-red/pen/WxJEJZ

作者：Jacob Sauerhoefer
使用技術：HTML / CSS (SCSS)
是否自適應：否
依賴庫：-
瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
源碼鏈接：https://codepen.io/jacobsauerhoefer/pen/mVZwLB

在線咨詢

上一篇：淺析Shopify獨立站痛點之一：支付方式
下一篇：各種圖文并茂的示例，讓我們快速進入qml世界

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Tailwind CSS 小案例，創建漂亮的收藏卡片列表