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>

打印页面