Tailwind CSS - 核心概念

上一頁
下一頁

Tailwind CSS 核心概念涵蓋了廣泛的基本主題，例如**實用類**、**自定義配置**等等。

Tailwind CSS 核心概念參考

以下主題涵蓋了如何應用核心概念，例如**實用類**、**自定義配置**等等。

主題 描述 示例
Tailwind CSS - 實用優先基礎 實用優先基礎解釋瞭如何使用實用類來構建和設定你的設計樣式。
Tailwind CSS - 懸停、焦點和其他狀態 懸停、焦點和其他狀態顯示瞭如何為元素的不同互動狀態應用樣式。
Tailwind CSS - 響應式設計 響應式設計確保你的網站在所有螢幕尺寸上都能很好地顯示。
Tailwind CSS - 暗黑模式 暗黑模式更改你網站的顏色，以便在弱光下更容易檢視。
Tailwind CSS - 重用樣式 重用樣式可以幫助你在多個元素中應用相同的設計。
Tailwind CSS - 新增自定義樣式 新增自定義樣式可以讓你建立超越預設選項的獨特設計。
Tailwind CSS - 函式和指令 函式和指令為你的樣式增加了額外的功能和控制。

Tailwind CSS 示例

在下面的示例中，我們使用 Tailwind CSS 核心概念類來設定不同元素（例如卡片、按鈕和響應式佈局）的樣式。

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4 bg-gray-100">
  <!-- Utility-First Fundamentals -->
  <section class="mb-6">
    <h1 class="text-xl font-bold text-blue-700 mb-3">
        Utility-First Fundamentals
    </h1>
    <div class="bg-white p-2 rounded shadow">
      <h2 class="text-lg font-semibold mb-1">Card</h2>
      <p class="text-gray-700">
          Uses utility classes for padding, background, and shadow.
      </p>
    </div>
  </section>

  <!-- Hover, Focus, and Other States -->
  <section class="mb-6">
    <h1 class="text-xl font-bold text-blue-700 mb-3">
        Hover & Focus States
    </h1>
    <button class="bg-green-500 text-white py-1 px-3 rounded 
        hover:bg-green-700 hover:ring focus:outline-none 
        focus:ring-2 hover:ring-green-500">
        Hover & Focus
    </button>
    <p class="mt-2 text-gray-600">
        Button changes color on hover and shows a focus ring.
    </p>
  </section>

  <!-- Responsive Design -->
  <section>
    <h1 class="text-xl font-bold text-blue-700 mb-3">
        Responsive Design
    </h1>
    <div class="grid grid-cols-1 md:grid-cols-2 
            lg:grid-cols-3 gap-4">
      <div class="bg-red-100 p-1 text-center rounded shadow">
        <h2 class="font-semibold">Block 1</h2>
        <p class="text-gray-600">
            Adjusts layout based on screen size.
        </p>
      </div>
      <div class="bg-red-100 p-1 text-center rounded shadow">
        <h2 class="font-semibold">Block 2</h2>
        <p class="text-gray-600">
            Switches columns on larger screens.
        </p>
      </div>
      <div class="bg-red-100 p-1 text-center rounded shadow">
        <h2 class="font-semibold">Block 3</h2>
        <p class="text-gray-600">
            Looks good on any device.
        </p>
      </div>
    </div>
  </section>
</body>

</html>

示例

在這個例子中，我們展示瞭如何將 Tailwind CSS 核心概念應用於諸如**暗黑模式**、使用**可重用元件**實現**一致的樣式**以及新增自定義樣式等功能。

<!DOCTYPE html>
<html lang="en">
<head> 
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gray-100 p-4">
    <h1 class="font-bold text-2xl mb-4">
        Tailwind CSS Core Concept Examples
    </h1>
  <!-- Dark Mode -->
    <section class="mb-6">
        <h1 class="text-xl font-bold text-blue-700 mb-2">
            Dark Mode
        </h1>
        <!-- Toggle dark mode with a button -->
        <button class="bg-gray-800 text-white py-2 px-4 
            rounded shadow-md dark:bg-gray-900 
            dark:text-gray-200">
              Dark Mode Button
        </button>
        <p class="mt-2 text-gray-600 dark:text-gray-400">
            This button adapts to dark mode settings.
        </p>
    </section>

  <!-- Reusing Styles -->
    <section class="mb-8">
      <h1 class="text-xl font-bold text-blue-700 mb-4">
          Reusing Styles
      </h1>
      <!-- Consistent styling with Tailwind utilities -->
      <div class="grid grid-cols-3 gap-4">
        <div class="bg-white p-4 rounded shadow-lg">
          <h2 class="text-xl font-semibold mb-2">Card</h2>
          <p class="text-gray-700">Reusable card with Tailwind utilities.</p>
        </div>
        <div class="bg-white p-4 rounded shadow-lg">
          <h2 class="text-xl font-semibold mb-2">Profile</h2>
          <p class="text-gray-700">Consistent profile box styling.</p>
        </div>
        <div class="bg-white p-4 rounded shadow-lg">
          <h2 class="text-xl font-semibold mb-2">Info Panel</h2>
          <p class="text-gray-700">Styled info panel for uniform design.</p>
        </div>
      </div>
       <p class="font-bold mt-4 text-center">
            Reuses the same styles for each Card.
        </p>
    </section>

    <!-- Adding Custom Styles -->
    <section class="mb-8">
      <h1 class="text-xl font-bold text-blue-700 mb-2">
          Adding Custom Styles
      </h1>
      <!-- Use Tailwind utilities with additional custom styles -->
      <div class="bg-teal-500 text-white p-4 rounded-lg 
                shadow-lg hover:bg-teal-600">
        <h2 class="text-xl font-semibold mb-2">
            Stylish Box
        </h2>
        <p>Styled with custom and Tailwind utilities.</p>
      </div>
    </section>
</body>

</html>
列印頁面
上一頁
下一頁
廣告