🎬 HoRain云小助手：个人主页
🔥 个人专栏: 《Linux 系列教程》《c语言教程》
⛺️生活的理想，就是为了理想的生活!
⛳️ 推荐
前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。
专栏介绍
专栏名称 | 专栏介绍 |
《C语言》 | 本专栏主要撰写C干货内容和编程技巧，让大家从底层了解C，把更多的知识由抽象到简单通俗易懂。 |
《网络协议》 | 本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘，一起解密网络协议在运行中协议的基本运行机制！ |
《docker容器精解篇》 | 全面深入解析 docker 容器，从基础到进阶，涵盖原理、操作、实践案例，助您精通 docker。 |
《linux系列》 | 本专栏主要撰写Linux干货内容，从基础到进阶，知识由抽象到简单通俗易懂，帮你从新手小白到扫地僧。 |
《python 系列》 | 本专栏着重撰写Python相关的干货内容与编程技巧，助力大家从底层去认识Python，将更多复杂的知识由抽象转化为简单易懂的内容。 |
《试题库》 | 本专栏主要是发布一些考试和练习题库（涵盖软考、HCIE、HRCE、CCNA等） |
目录
⛳️ 推荐
专栏介绍
Tailwind CSS 重用样式的方法
1. 使用 @apply 指令创建自定义类
2. 利用 @layer 和 @apply 定义更复杂的样式
3. 使用 variants 功能创建响应式样式
4. 使用 JavaScript 配置文件
5. 创建 Tailwind 插件
编译 Tailwind CSS
Tailwind CSS 重用样式的方法
在使用 Tailwind CSS 时，当多个元素需要相同的工具类组合时，会导致代码冗长且维护困难。例如：
<div class="flex space-x-4"> <img class="w-16 h-16 rounded-full border-2 border-white" src="/img/avatar1.jpg" alt="User 1"> <img class="w-16 h-16 rounded-full border-2 border-white" src="/img/avatar2.jpg" alt="User 2"> <!-- 重复的类名... --> </div>如果需要调整这些样式（如改变边框颜色或圆角大小），则需要手动修改每个类，导致维护困难。以下是几种解决重复样式的方案：
1. 使用 @apply 指令创建自定义类
在 CSS 文件中将一组常用的工具类组合成一个自定义类：
@tailwind base; @tailwind components; @tailwind utilities; /* 在你的 CSS 文件中 */ .avatar { @apply w-16 h-16 rounded-full border-2 border-white; }然后在 HTML 中只需使用这个自定义类：
<div class="flex space-x-4"> <img class="avatar" src="/img/avatar1.jpg" alt="User 1"> <img class="avatar" src="/img/avatar2.jpg" alt="User 2"> <!-- 简洁的代码... --> </div>2. 利用 @layer 和 @apply 定义更复杂的样式
使用 @layer 来组织自定义样式，并通过 @apply 组合它们：
@tailwind base; @tailwind components; @tailwind utilities; @layer components { .avatar { @apply w-16 h-16 rounded-full border-2 border-white shadow-md; } .button { @apply px-4 py-2 bg-blue-500 text-white rounded-lg; } .card { background-color: theme('colors.white'); border-radius: theme('borderRadius.lg'); padding: theme('spacing.6'); box-shadow: theme('boxShadow.xl'); } }3. 使用 variants 功能创建响应式样式
通过 variants 扩展工具类，使样式可以根据状态或设备尺寸变化：
@layer components { .avatar { @apply w-16 h-16 rounded-full border-2 border-white; } /* 响应式变化：在较大的屏幕上使用更大的头像 */ @media (min-width: 768px) { .avatar { @apply w-24 h-24; } } .btn-primary { @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md; &:hover { @apply bg-blue-700; } &:focus { @apply outline-none ring-2 ring-blue-400 ring-opacity-75; } } }4. 使用 JavaScript 配置文件
在 tailwind.config.js 中添加自定义样式：
module.exports = { theme: { extend: { // 添加自定义颜色 colors: { 'custom-blue': '#1DA1F2', }, // 添加自定义字体大小 fontSize: { 'xxs': '.625rem', }, }, }, }5. 创建 Tailwind 插件
对于更复杂的样式，可以创建 Tailwind 插件：
const plugin = require('tailwindcss/plugin') module.exports = { plugins: [ plugin(function({ addComponents }) { const buttons = { '.btn': { padding: '.5rem 1rem', borderRadius: '.25rem', fontWeight: '600', }, '.btn-blue': { backgroundColor: '#3490dc', color: '#fff', '&:hover': { backgroundColor: '#2779bd' } }, } addComponents(buttons) }) ] }编译 Tailwind CSS
使用 Tailwind CLI 或 PostCSS 进行编译：
npx tailwindcss -i ./styles.css -o ./output.css --watch编译后生成的 output.css 文件会将 @apply 替换为具体的 CSS 样式。
通过这些方法，你可以轻松创建可复用的样式，减少代码重复，提高开发效率和可维护性，同时保持与 Tailwind CSS 框架的一致性。
❤️❤️❤️本人水平有限，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄
💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍
🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧！🌙🌙🌙
