Tailwind CSS - 核心概念



Tailwind CSS 核心概念涵盖了广泛的基本主题,例如**实用类**、**自定义配置**等等。

Tailwind CSS 核心概念参考

以下主题涵盖了如何应用核心概念,例如**实用类**、**自定义配置**等等。

主题 描述 示例
Tailwind CSS - 实用优先基础 实用优先基础解释了如何使用实用类来构建和设置你的设计样式。
Tailwind CSS - 悬停、焦点和其他状态 悬停、焦点和其他状态显示了如何为元素的不同交互状态应用样式。
Tailwind CSS - 响应式设计 响应式设计确保你的网站在所有屏幕尺寸上都能很好地显示。
Tailwind CSS - 暗黑模式 暗黑模式更改你网站的颜色,以便在弱光下更容易查看。
Tailwind CSS - 重用样式 重用样式可以帮助你在多个元素中应用相同的设计。
Tailwind CSS - 添加自定义样式 添加自定义样式可以让你创建超越默认选项的独特设计。
Tailwind CSS - 函数和指令 函数和指令为你的样式增加了额外的功能和控制。

Tailwind CSS 示例

在下面的示例中,我们使用 Tailwind CSS 核心概念类来设置不同元素(例如卡片、按钮和响应式布局)的样式。

Open Compiler
<!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>

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

示例

在这个例子中,我们展示了如何将 Tailwind CSS 核心概念应用于诸如**暗黑模式**、使用**可重用组件**实现**一致的样式**以及添加自定义样式等功能。

Open Compiler
<!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>
广告