資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 Tailwind CSS 中建立帶文字的圓形元素？
在本文中，我們將學習如何使用 Tailwind CSS 建立一個包含文字的圓形元素。Tailwind CSS 是一款功能導向的 CSS 框架，可以快速進行 UI 開發。按照以下步驟，您將能夠在專案中建立引人注目的帶文字的圓形元素。
先決條件
- 對 HTML 和 CSS 的基本理解。
- 熟悉 Tailwind CSS。
使用 Tailwind CSS 建立帶文字的圓形
步驟 1：設定專案
您需要首先為您的專案建立一個新目錄，並導航到建立的專案中。
mkdir circle-text-project cd circle-text-project
步驟 2：新增 Tailwind CSS
要使用 Tailwind CSS，您可以透過 CDN 在 HTML 檔案中包含它，或者使用 npm 進行設定。為了簡單起見，我們將使用 CDN 方法。
建立並開啟您的 index.html 檔案，並新增以下內容 -
示例程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<title>Circle with Text</title>
<link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="flex items-center justify-center h-screen bg-gray-100">
<div class="flex items-center justify-center">
<div class="w-32 h-32 bg-green-500 rounded-full
flex items-center justify-center
text-white font-bold text-center
leading-tight text-sm">
Tutorialpoints
</div>
</div>
</body>
</html>
輸出
更新於： 2024年11月6日
22 次檢視
廣告