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>
