开发学习网Tailwind CSS - 重用样式
原创Tailwind CSS - 重用样式
Tailwind CSS 采用实用优先的方法，通过应用小而专注、单一用途的类来构建设计。这种方法有助于避免复杂性并保持代码的一致性。
在项目开发过程中，您可能会发现自己在多个地方使用相同的实用类集合。与其为重复的样式编写自定义CSS，不如使用Tailwind的实用类来高效处理这些重复。
以下是一个简单的示例，展示如何在网页上显示配置文件小部件，每个小部件应用了三次相似的实用类。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4 bg-gray-100">
<div class="flex space-x-4 overflow-x-auto p-4 bg-gray-200">
<!-- 配置文件小部件 1 -->
<div class="flex-shrink-0 w-56 p-4 bg-white border border-gray-300 rounded-lg shadow-lg flex flex-col items-center space-y-3">
<div class="mb-3">
<img class="h-20 w-20 rounded-full border-4 border-cyan-500 shadow-md" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Profile Picture"/>
</div>
<div class="text-center">
<h3 class="text-lg font-semibold text-gray-800 mb-1">John Doe</h3>
<p class="text-gray-600 text-sm mb-2">Tech Enthusiast</p>
<p class="text-gray-500 text-xs">John has over 5 years of experience in the tech industry, focusing on software development and innovation.</p>
</div>
</div>
<!-- 配置文件小部件 2 -->
<div class="flex-shrink-0 w-56 p-4 bg-white border border-gray-300 rounded-lg shadow-lg flex flex-col items-center space-y-3">
<div class="mb-3">
<img class="h-20 w-20 rounded-full border-4 border-rose-500 shadow-md" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Profile Picture"/>
</div>
<div class="text-center">
<h3 class="text-lg font-semibold text-gray-800 mb-1">Jane Smith</h3>
<p class="text-gray-600 text-sm mb-2">UI/UX Designer</p>
<p class="text-gray-500 text-xs">Jane is a skilled UI/UX designer with 3 years of experience in creating intuitive user interfaces and enhancing user experiences.</p>
</div>
</div>
<!-- 配置文件小部件 3 -->
<div class="flex-shrink-0 w-56 p-4 bg-white border border-gray-300 rounded-lg shadow-lg flex flex-col items-center space-y-3">
<div class="mb-3">
<img class="h-20 w-20 rounded-full border-4 border-violet-500 shadow-md" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Profile Picture"/>
</div>
<div class="text-center">
<h3 class="text-lg font-semibold text-gray-800 mb-1">Alice Johnson</h3>
<p class="text-gray-600 text-sm mb-2">Data Scientist</p>
<p class="text-gray-500 text-xs">Alice has 7 years of experience as a data scientist, specializing in data analysis and machine learning.</p>
</div>
</div>
</div>
</body>
</html>
别担心！我们将帮助您了解如何在项目中重用样式以及何时有效使用每种方法。
使用编辑器和语言功能
通常，重复样式不是问题，因为它们都在一个地方或通过循环创建，所以您只需编写一次代码。
如果您在单个文件中工作，请使用多光标编辑一次对多行进行更改。对于重复元素，使用循环从单个代码块生成它们。这使您的工作保持高效和有序。
多光标编辑
多光标编辑是许多文本编辑器中的一个功能，使您能够在文档中的不同位置放置多个光标。这使您能够一次在多个位置进行相同的更改，非常适合快速更新重复内容。
当您在单个文件中有重复的样式或元素时，多光标编辑可以帮助您一次性修改它们。让我们看一个示例来了解它的工作原理。
假设您有以下项目列表，并且希望将每个项目的bg-red-100类更新为bg-teal-100。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h3 class="font-bold underline mb-4">购物车中的物品列表：</h3>
<ul class="shopping-cart">
<li class="bg-red-100 p-2">苹果</li>
<li class="bg-red-100 p-2">香蕉</li>
<li class="bg-red-100 p-2">橙子</li>
<li class="bg-red-100 p-2">葡萄</li>
</ul>
</body>
</html>
添加光标
按住Alt键并点击代码中每个bg-red-100旁边。这将在您点击的每个位置放置一个光标，放置所有光标后，输入bg-teal-100。所有bg-red-100实例将立即更新为bg-teal-100。
更新后的代码：
<ul class="shopping-cart">
<li class="bg-teal-100 p-2">苹果</li>
<li class="bg-teal-100 p-2">香蕉</li>
<li class="bg-teal-100 p-2">橙子</li>
<li class="bg-teal-100 p-2">葡萄</li>
</ul>
您可能会发现使用多光标编辑通常是处理重复样式的最简单方法。它帮助您一次性更新所有实例，因此您不需要额外的工具或方法。
循环
编程中的循环使处理重复元素变得更加容易。与其一遍又一遍地编写相同的代码，不如使用循环来自动创建相同的HTML结构。因此，在处理Web项目中的重复设计元素时，有效使用循环非常重要。
在为每个重复设计元素创建单独的组件或自定义类之前，请检查您是否多次使用该元素。
例如，本指南开头显示的配置文件小部件使用了三次相同的设计。与其单独编写每个小部件，我们可以使用循环从单个模板生成多个元素。让我们看看下面的示例是如何工作的。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<div id="profile-container" class="flex space-x-4 overflow-x-auto p-4 bg-gray-200">
<!-- 配置文件小部件将在此处动态插入 -->
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const profiles = [
{ name: "John Doe", role: "Tech Enthusiast", imgSrc: "https://randomuser.me/api/portraits/men/1.jpg", borderColor: "border-cyan-500" },
{ name: "Jane Smith", role: "UI/UX Designer", imgSrc: "https://randomuser.me/api/portraits/women/2.jpg", borderColor: "border-rose-500" },
{ name: "Alice Johnson", role: "Data Scientist", imgSrc: "https://randomuser.me/api/portraits/men/3.jpg", borderColor: "border-violet-500" }
];
const container = document.getElementById('profile-container');
profiles.forEach(profile => {
container.innerHTML += `
<div class="flex-shrink-0 w-56 p-4 bg-white border border-gray-300 rounded-lg shadow-lg flex flex-col items-center space-y-3">
<div class="mb-3">
<img class="h-20 w-20 rounded-full border-4 ${profile.borderColor} shadow-md" src="${profile.imgSrc}" alt="Profile Picture"/>
</div>
<div class="text-center">
<h3 class="text-lg font-semibold text-gray-800 mb-1">${profile.name}</h3>
<p class="text-gray-600 text-sm mb-2">${profile.role}</p>
<p class="text-gray-500 text-xs">个人描述信息。</p>
</div>
</div>
`;
});
});
</script>
</body>
</html>
使用循环意味着您只需编写一次标记，避免重复并使更新更容易。它有效地管理动态数据，并确保更改在一个地方应用。
提取组件和部分
如果您想在不同的文件中重用样式，如果您使用的是React、Svelte或Vue等前端框架，创建组件是个好主意。如果您使用的是Blade、ERB、Twig或Nunjucks等模板语言，您应该创建模板部分。这种方法有助于保持代码井井有条，并使维护更容易。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<div class="testimonial-section">
<div class="testimonial-card p-4 bg-white border border-gray-300 rounded-lg shadow-lg">
<img class="w-16 h-16 rounded-full border-2 border-gray-300" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Alice Johnson的照片" />
<h3 class="mt-2 text-lg font-semibold text-gray-800">Alice Johnson</h3>
<p class="mt-1 text-gray-600">这项服务太棒了！它超出了我的所有期望。</p>
</div>
<div class="testimonial-card p-4 bg-white border border-gray-300 rounded-lg shadow-lg mt-4">
<img class="w-16 h-16 rounded-full border-2 border-gray-300" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Bob Smith的照片" />
<h3 class="mt-2 text-lg font-semibold text-gray-800">Bob Smith</h3>
<p class="mt-1 text-gray-600">从头到尾都是绝佳的体验。</p>
</div>
</div>
</body>
</html>
对于上面的示例，使用Tailwind CSS在React中创建一个TestimonialCard组件，并根据项目需要多次使用它。以下是您可以用来显示评价的功能组件。
示例
// TestimonialCard.jsx
import React from 'react';
const TestimonialCard = ({ name, photo, testimonial }) => (
<div className="p-4 bg-white border border-gray-300 rounded-lg shadow-lg">
<img className="w-16 h-16 rounded-full border-2 border-gray-300" src={photo} alt={`${name}的照片`} />
<h3 className="mt-2 text-lg font-semibold text-gray-800">{name}</h3>
<p className="mt-1 text-gray-600">{testimonial}</p>
</div>
);
export default TestimonialCard;
要在您的应用程序或设计中使用TestimonialCard组件，只需导入它并提供必要的props。
示例
// App.jsx
import React from 'react';
import TestimonialCard from './TestimonialCard';
const App = () => (
<div className="p-4 bg-gray-100">
<div className="flex space-x-4">
<TestimonialCard
name="John Doe"
photo="https://randomuser.me/api/portraits/men/1.jpg"
testimonial="John的体验很棒。服务一流，超出了预期。"
/>
<TestimonialCard
name="Jane Smith"
photo="https://randomuser.me/api/portraits/women/2.jpg"
testimonial="Jane有很棒的体验！强烈推荐给任何寻求优质服务的人。"
/>
</div>
</div>
);
export default App;
随处使用此组件，并从一个地方轻松更新样式。
与CSS抽象的比较
设计Web界面时，仅靠CSS不足以处理复杂组件。您需要HTML和CSS来有效处理详细的UI元素。
以"进度跟踪器"为例。不是用CSS单独设置每个步骤的样式，而是组件为每个步骤组合了HTML和CSS。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex justify-center items-center h-screen bg-gray-100">
<div class="w-full max-w-3xl px-4 py-6 bg-white rounded-lg shadow-md">
<div class="text-center mb-8 text-gray-800">
<p class="text mb-4 ml-4">此跟踪器显示您通过不同阶段的进度：</p>
<ul class="list-disc list-inside text-left text-gray-600">
<li><strong class="text-green-500">已完成：</strong> 已完成的步骤</li>
<li><strong class="text-yellow-500">当前：</strong> 活动步骤</li>
<li><strong class="text-gray-300">即将到来：</strong> 未来步骤</li>
</ul>
</div>
<div class="relative flex items-center">
<div class="absolute inset-0 flex items-center pointer-events-none">
<div class="flex-1 h-1 bg-green-500"></div>
<div class="flex-1 h-1 bg-yellow-400"></div>
<div class="flex-1 h-1 bg-gray-300"></div>
<div class="flex-1 h-1 bg-gray-300"></div>
</div>
<!-- 步骤 -->
<div class="flex-1 text-center relative z-10">
<div class="w-12 h-12 rounded-full bg-green-500 text-white flex items-center justify-center mx-auto mb-2 text-2xl"></div>
<div class="text-sm">步骤 1</div>
</div>
<div class="flex-1 text-center relative z-10">
<div class="w-12 h-12 rounded-full bg-yellow-500 text-white flex items-center justify-center mx-auto mb-2 text-2xl"></div>
<div class="text-sm">步骤 2</div>
</div>
<div class="flex-1 text-center relative z-10">
<div class="w-12 h-12 rounded-full bg-gray-200 text-white flex items-center justify-center mx-auto mb-2 text-2xl"></div>
<div class="text-sm">步骤 3</div>
</div>
<div class="flex-1 text-center relative z-10">
<div class="w-12 h-12 rounded-full bg-gray-200 text-white flex items-center justify-center mx-auto mb-3 text-2xl"></div>
<div class="text-sm">步骤 4</div>
</div>
<div class="absolute right-0 top-1/2 w-1/4 h-px bg-gray-300"></div>
</div>
</div>
</body>
</html>
即使您使用类进行样式设置，每次使用组件时最终都会重复HTML。虽然更新字体大小很简单，但进行更复杂的更改（如将标题转换为链接）仅使用CSS会很困难。
组件和模板部分更好，因为它们结合了HTML和样式。这样，您可以在一个地方更新字体大小或将所有标题更改为链接。
考虑使用模板部分或JavaScript组件作为更简单的解决方案。
示例
import React from 'react';
function Step({ status, number }) {
const statusClasses = {
completed: 'bg-green-500',
current: 'bg-yellow-500',
upcoming: 'bg-gray-200'
};
return (
<div className="flex-1 text-center relative z-10">
<div className={`w-12 h-12 rounded-full ${statusClasses[status]} text-white flex items-center justify-center mx-auto mb-2 text-2xl`}>
{status === 'completed' ? '✓' : status === 'current' ? '•' : ''}
</div>
<div className="text-sm">步骤 {number}</div>
</div>
);
}
function ProgressTracker() {
return (
<div className="relative flex items-center">
<div className="absolute inset-0 flex items-center pointer-events-none">
<div className="flex-1 h-1 bg-green-500"></div>
<div className="flex-1 h-1 bg-yellow-400"></div>
<div className="flex-1 h-1 bg-gray-300"></div>
<div className="flex-1 h-1 bg-gray-300"></div>
</div>
<Step status="completed" number={1} />
<Step status="current" number={2} />
<Step status="upcoming" number={3} />
<Step status="upcoming" number={4} />
<div className="absolute right-0 top-1/2 w-1/4 h-px bg-gray-300"></div>
</div>
);
}
export default ProgressTracker;
使用组件和模板部分，您只需要实用类，因为样式在一个地方处理。
使用Tailwind的@apply指令提取类
设计网页时，重复使用相同的实用类可能会使您的HTML混乱且难以管理。Tailwind CSS通过@apply指令帮助解决这个问题。
什么是@apply以及何时使用它？
@apply指令允许您通过应用一组Tailwind实用类来创建自定义CSS类。这通过将重复的样式移到您的CSS文件中来保持HTML的整洁。
虽然模板部分适用于复杂组件，但@apply非常适合常用样式。它有助于保持HTML整洁并使样式一致。
在使用@apply之前，您可能会直接在HTML中添加多个实用类来为卡片设置样式。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4 bg-gray-200">
<div class="p-6 max-w-sm mx-auto bg-white rounded-lg shadow-md">
<h2 class="text-xl font-bold mb-2">卡片标题</h2>
<p class="text-gray-700">这是一个使用Tailwind实用样式设置的卡片组件。</p>
</div>
</body>
</html>
使用@apply后：在您的CSS中为卡片定义自定义类，然后在您的HTML中使用它：
<div class="card">
<h2 class="card-title">卡片标题</h2>
<p class="card-content">这是一个使用Tailwind实用样式设置的卡片组件。</p>
</div>
使用@apply的CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.card {
@apply p-6 max-w-sm mx-auto bg-white rounded-lg shadow-md;
}
.card-title {
@apply text-xl font-bold mb-2;
}
.card-content {
@apply text-gray-700;
}
}
使用@apply指令有助于保持样式的井井有条和代码的整洁。
避免过早抽象
不要仅为了清理HTML而使用@apply。这似乎是个好主意，但它可能会产生更多问题：
- 命名问题：想出类名可能会很累人。
- 多次编辑：过度使用@apply意味着在CSS和HTML之间不断切换。
- 样式更改：对一个类的更改可能会无意中影响您网站的其他部分。
- 更大的CSS文件：许多自定义类可能会增加CSS文件大小并影响性能。
对于按钮等小型可重用项目使用@apply，或在React等框架中使用组件以获得更好的管理。
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权本站发表，未经许可，不得转载。
上一篇：
Tailwind CSS - 暗黑模式 下一篇：
Tailwind CSS - 添加自定义样式
相关文章
作者文章
- CSS 使用CSS数学函数 4个月前 (08-23)
- CSS Textual data types 4个月前 (08-23)
- CSS 数字数据类型 4个月前 (08-23)
- CSS CSS 属性值定义语法 4个月前 (08-23)
- CSS 使用 CSS 过渡 4个月前 (08-23)