笙亿网络策划

Tailwind CSS 核心概念有哪些？怎么快速上手掌握？

约 11 分钟读完 35 阅
文章导读
上一个 测验 下一个 Tailwind CSS 核心概念涵盖了广泛的基础主题，例如 utility classes、custom configuration 等。
📋 目录
  1. 一 Tailwind CSS 核心概念参考
  2. 二 Tailwind CSS 示例
  3. 三 示例
A A

Tailwind CSS - 核心概念

上一个
测验
下一个

Tailwind CSS 核心概念涵盖了广泛的基础主题，例如 utility classes、custom configuration 等。

Tailwind CSS 核心概念参考

以下主题介绍了如何应用核心概念，如 utility classes、custom configuration 等。

主题 描述 示例
Tailwind CSS - Utility-First Fundamentals Utility-First Fundamentals 解释了如何使用 utility classes 来构建和样式化你的设计
试一试
Tailwind CSS - Hover, Focus, and Other States Hover、focus 和其他状态展示了如何为元素的各种交互状态应用样式。
试一试
Tailwind CSS - Responsive Design 响应式设计确保你的网站在所有屏幕尺寸上都呈现良好。
试一试
Tailwind CSS - Dark Mode 暗黑模式更改网站的颜色，以便在低光环境下更易查看。
试一试
Tailwind CSS - Reusing Styles 重用样式有助于在多个元素上应用相同的设计。
试一试
Tailwind CSS - Adding Custom Styles 添加自定义样式让你能够创建超出默认选项的独特设计。
试一试
Tailwind CSS - Functions & Directives Functions & directives 为你的样式添加额外的功能和控制。
试一试

Tailwind CSS 示例

在以下示例中，我们使用 Tailwind CSS 的核心 concepts classes 来为不同元素（如卡片、按钮和响应式布局）进行样式设计。

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

<body class="p-4 bg-gray-100">
  <!-- 实用优先基础 -->
  <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">
          使用 utility classes 实现 padding、background 和 shadow。
      </p>
    </div>
  </section>

  <!-- 悬停、聚焦和其他状态 -->
  <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">
        按钮在悬停时改变颜色，并显示聚焦环。
    </p>
  </section>

  <!-- 响应式设计 -->
  <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">
            根据屏幕尺寸调整布局。
        </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">
            在大屏幕上切换列数。
        </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">
            在任何设备上都显示良好。
        </p>
      </div>
    </div>
  </section>
</body>

</html>

示例

在这个示例中，我们展示如何将 Tailwind CSS 的核心概念应用到诸如 dark mode、使用 reusable components 实现 consistent styling，以及添加 custom styles 等功能上。

<!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>
  <!-- 深色模式 -->
    <section class="mb-6">
        <h1 class="text-xl font-bold text-blue-700 mb-2">
            Dark Mode
        </h1>
        <!-- 使用按钮切换深色模式 -->
        <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>

  <!-- 复用样式 -->
    <section class="mb-8">
      <h1 class="text-xl font-bold text-blue-700 mb-4">
          Reusing Styles
      </h1>
      <!-- 使用 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>

    <!-- 添加自定义样式 -->
    <section class="mb-8">
      <h1 class="text-xl font-bold text-blue-700 mb-2">
          Adding Custom Styles
      </h1>
      <!-- 使用 Tailwind utilities 结合额外的自定义样式 -->
      <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>