首页 前端CSS正文

Tailwind CSS - 添加自定义样式

原创
admin 4个月前 (08-07) 阅读数 22 #CSS

Tailwind CSS - 添加自定义样式

在 Tailwind CSS 中，添加自定义样式意味着向框架添加您自己的独特样式。

通常，任何框架面临的挑战是当它不能提供您所需的一切时，该如何处理。Tailwind 被设计为灵活且可定制的，因此您可以调整它以适应您的项目。

我们将指导您调整设计设置，添加自定义 CSS，以及使用插件来增强 Tailwind 的功能。

自定义您的 Tailwind 主题

要在 Tailwind CSS 中自定义字体大小、边框样式或间距等内容，您需要在 tailwind.config.js 文件中进行更新。以下是操作方法：

将您的自定义设置添加到 tailwind.config.js 文件中。例如，您可以调整字体大小并引入新的边框样式。

示例

/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
        fontSize: {
          'xs': '0.75rem',
          'sm': '0.875rem',
          'base': '1rem',
          'lg': '1.125rem',
          'xl': '1.25rem',
          '2xl': '1.5rem',
          '3xl': '1.875rem',
          '4xl': '2.25rem',
          '5xl': '3rem',
        },
        borderColor: {
          'primary': '#4a90e2',
          'secondary': '#d0021b',
          'tertiary': '#f5a623',
        },
        extend: {
          spacing: {
            'extra-wide': '40rem',
          },
          borderRadius: {
            'extra-large': '1.5rem',
          },
        },
    },
}

通过更新配置，您现在可以在 HTML 中使用自定义的字体大小和边框样式。以下是应用它们的方法。

示例

<div class="p-extra-wide border-primary border-2 
            rounded-extra-large text-3xl">
        这是一个具有自定义间距、边框颜色和字体大小的样式化 div。
</div>

有关自定义主题的更多详细信息，请查看主题配置文档。

Tailwind CSS 中的任意值

在 Tailwind CSS 中，您通常使用预定义的设计设置来设置元素样式。但是，当您需要对设计进行更精确的控制时，Tailwind 允许您使用任意值。

有时，您的设计需求可能不符合 Tailwind 的默认选项。例如，您可能需要一个独特的边框宽度或填充，而这些在标准配置中不可用。任意值允许您直接在类名中设置这些自定义大小，从而获得您想要的确切外观。

要在 Tailwind CSS 中应用任意值，请使用方括号表示法。这允许您将任何有效的 CSS 值直接插入到您的类名中。

示例

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

<body class="p-4">
    <div class="border-[5px] p-[30px] bg-gray-300 rounded-lg shadow-lg">
        <h2 class="text-2xl font-bold mb-4 text-gray-800">卡片标题</h2>
            这是一个具有自定义边框宽度和填充的示例卡片。
            背景颜色为浅灰色，额外的样式包括圆角和阴影效果。
    </div>
</body>

</html>

在此示例中，border-[5px] 将边框宽度设置为 5 像素，p-[30px] 在所有边上添加 30 像素的填充，展示了任意值的使用。

您可以使用任意值进行间距和定位。以下是如何使用特定值定位元素并使其具有响应式的示例。

示例

<div class="top-[117px] lg:top-[344px]">
      <!-- 您的内容在这里 -->
</div>

在这里，top-[117px] 将位置设置为距离顶部 117 像素，lg:top-[344px] 在大屏幕上将其移动到距离顶部 344 像素。

任意值也可用于背景颜色、字体大小和伪元素。

示例

<div class="bg-[#bada55] text-[22px] before:content['Festivus']">
    <!-- 您的内容在这里 -->
</div>

在这里，bg-[#bada55] 更改背景颜色，text-[22px] 设置字体大小，before:content['Festivus'] 在内容前添加"Festivus"。

您可以引用 Tailwind 配置文件中的设计令牌以实现一致的样式。

示例

<div class="grid grid-cols-[fit-content(theme(spacing.32))]">
    <!-- 您的内容在这里 -->
</div>

在这里，theme (spacing.32) 从您的 tailwind.config.js 获取间距值。

如果您为项目定义了 CSS 变量，可以直接像这样使用它们：

示例

<div class="bg-[--my-color]">
    <!-- 您的内容在这里 -->
</div>

在这种情况下，--my-color 是在样式表其他地方定义的 CSS 变量。

任意属性

Tailwind CSS 中的任意属性允许您在实用工具类中使用方括号直接使用自定义 CSS 值。

有时，您可能需要一个不在 Tailwind 的实用工具中的 CSS 属性。例如，如果您需要一个默认情况下不可用的特定 backdrop-filter 效果，您可以使用任意值。

示例

<div class="blurred-bg [backdrop-filter:blur(10px)]">
    <!-- 具有模糊背景效果的内容 -->
</div>

您还可以使用 Tailwind CSS 任意值与修饰符进行动态样式设置。例如，在 hover 时调整元素的 backdrop-filter。

示例

<div class="blurred-bg [backdrop-filter:blur(10px)] hover:[backdrop-filter:blur(20px)]">
    <!-- 具有模糊背景效果的内容 -->
</div>

Tailwind CSS 的任意值对于根据屏幕大小等条件调整 CSS 变量非常有用。例如，设置一个在不同屏幕尺寸下变化的 CSS 变量的填充：

示例

<div class="dynamic-padding [--padding-size:20px] 
            md:[--padding-size:40px] lg:[--padding-size:60px]">
    <!-- 根据屏幕尺寸具有填充的内容 -->
</div>

Tailwind CSS 中的任意变体

Tailwind CSS 中的任意变体使您能够直接在 HTML 中应用自定义样式。与预定义的变体（如 hover: 或 md:）不同，您可以使用方括号即时创建新变体。

示例

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

<body class="p-4">
    <button class="bg-blue-500 text-white p-4 rounded 
                   hover:[background-color:#46b789]">
              悬停在我上面
    </button>
</body>

</html>

有关更多详细信息，请查看任意变体文档。

处理空白

Tailwind CSS 中处理空白意味着在任意值中使用下划线(_)代替空格，Tailwind 会在构建时将其转换为空格。

示例

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

<body class="p-6"> 
    <div class="text-[line-height:2rem]">
        此文本的行高为 2rem。
    </div>
</body>

</html>

当您需要在不允许有空格的 URL 或路径中包含空格时，请使用下划线(_)。Tailwind CSS 将保留下划线而不会将其转换为空格，例如：

示例

<div class="bg-[url('/hello_to_world.png']]"....>
    <!-- 在 URL 中使用下划线的示例 -->
</div>

当您需要一个下划线但空格也有效时，请使用反斜杠(\)转义下划线，Tailwind 将其保留为下划线：

示例

<div class="text-[letter-spacing:\0.1em]">
    <!-- -->
</div>

在 JSX 中，反斜杠通常被视为转义字符，请使用 String.raw() 确保反斜杠正确包含在输出 HTML 中：

示例

<div className={String.raw`before:content['Welcome\_to our Website']`}>
    <!-- ... -->
</div>

解决歧义

在 Tailwind 中，一些实用工具类具有相似的名称但应用于不同的 CSS 属性。例如，border-4 设置边框宽度，而 border-red-800 将边框颜色更改为红色。尽管两者都以 border 开头，但它们处理边框样式的不同部分。

当您使用自定义值时，Tailwind 会自动根据您提供的值理解要应用哪个属性。

示例

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

<body class="p-6"> 
      <div class="text-[22px]">
          此文本的字体大小为 22px。
      </div> 
      <div class="text-[#67aa55]">
          此文本的颜色由十六进制代码定义。
      </div>
</body>

</html>

使用 CSS 变量时可能会出现歧义。例如，如果您 使用 text-[var(--my-var)]，Tailwind 无法判断 --my-var 是字体大小还是颜色。

假设您有一个用于大小或颜色的 CSS 变量，如下所示：

示例

<div class="text-[var(--my-value)]">
    此文本使用 CSS 变量。
</div>

在此示例中，--my-value 可用于各种目的，如字体大小或颜色。

要明确 var(--my-value) 应该用于什么，您可以明确指定类型。这有助于 Tailwind 确切地理解如何应用 CSS 变量。

如果 --my-value 用作字体大小，或者 --my-value 旨在用作颜色，那么您应该这样使用它：

示例

<!-- 使用 CSS 变量的字体大小 -->
<div class="text-[length:var(--font-size)]">
    此文本使用 CSS 变量设置字体大小。
</div>

<!-- 使用 CSS 变量的颜色 -->
<div class="text-[color:var(--text-color)]">
    此文本使用 CSS 变量设置颜色。
</div>

使用 CSS 和 @layer

在使用 Tailwind CSS 时，您可能需要其实用工具未涵盖的自定义样式。使用 @layer 指令将这些样式添加到 Tailwind 系统中，以实现正确的排序和优化。

对于简单的自定义 CSS，您可以直接将其添加到样式表中。

示例

@tailwind base;
@tailwind components;
@tailwind utilities;

.custom-button {
    background-color: #4a90e2; /* 自定义背景颜色 */
    border-radius: 12px;      /* 自定义边框半径 */
    color: white;              /* 自定义文本颜色 */
    padding: 10px 20px;        /* 自定义填充 */
    text-align: center;        /* 居中文本 */
}

为了获得更多控制，请使用 @layer 指令将自定义样式添加到 Tailwind 的基础、组件和实用工具层。这有助于您的样式与 Tailwind 的现有系统很好地配合。

示例

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .custom-button {
        background-color: #4a90e2; /* 自定义背景颜色 */
        border-radius: 12px;      /* 自定义边框半径 */
        color: white;              /* 自定义文本颜色 */
        padding: 10px 20px;        /* 自定义填充 */
        text-align: center;        /* 居中文本 */
        box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* 自定义阴影 */
        font-size: 16px;           /* 自定义字体大小 */
    }
}

为什么 Tailwind 将样式分组到层中？

Tailwind 将样式分组到层中是为了管理它们的交互方式和哪些样式具有优先级。这种方法有助于防止冲突，并确保样式以一致有序的方式应用。

示例

.header {
    font-size: 20px;
    
    }
    
.text-large {
    font-size: 24px;
    
    }

如果同时使用这两种样式。

示例

<h1 class="header text-large">Hello World</h1>

文本将为 24px，因为 .text-large 在 .header 之后，所以它优先。

Tailwind 将样式组织到三个层中：

  • 基础层：应用设置基本外观和感觉的默认样式，如字体和颜色。
  • 组件层：为特定元素（如按钮）添加样式，您可以轻松重用这些样式。
  • 实用工具层：包含小型、单用途的样式，可以覆盖其他层的任何内容，以进行精确的设计更改。

明确了解样式的交互方式使它们更易于管理。@layer 指令帮助您控制样式的最终顺序，同时允许您按自己喜欢的方式组织代码。

Tailwind CSS 中的 @layer 指令允许您将自定义样式添加到 Tailwind 的现有层中。它使您的样式保持组织良好，与 Tailwind 的实用工具配合良好，并支持修饰符和树摇等功能以获得更好的性能。

在 Tailwind CSS 中添加基础样式

要在 Tailwind CSS 中为页面设置默认样式，如文本颜色或背景颜色，只需在您的 或 元素中直接添加类即可。

示例

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

<body class="p-6">
    <header class="bg-blue-500 text-white p-4 rounded">
        <h1 class="text-3xl font-semibold">我的网站</h1>
    </header>
    <main class="mt-6">
        <h2 class="text-2xl font-medium mb-4">介绍</h2>
        <p class="text-base leading-relaxed">
            这是一个显示自定义基础样式的示例页面。
            文本颜色设置为深灰色，背景为白色，
            字体为无衬线字体，具有现代外观。
        </p>
    </main>
</body>
  
</html>

这种方法使您的样式直接保留在标记中，使它们更可见且易于访问。

如果您需要将自定义样式应用于特定的 HTML 元素，可以使用 Tailwind 的 @layer 指令将它们包含在 Tailwind 的基础层中。

示例

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    h1 {
      @apply text-3xl font-bold;
    }
    h2 {
      @apply text-xl font-semibold;
    }
    p {
      @apply text-base leading-relaxed;
    }
}

这些方法使您的基础样式保持一致，并使它们易于调整或扩展。使用 theme 函数或 @apply 指令将您主题中的值包含在您的自定义基础样式中。

添加组件类

使用组件层为您的项目添加更复杂的类，同时仍然允许使用实用工具类进行覆盖。

传统上，您可能会在此类别中包含像 modal、alert 或 dropdown 这样的类。

示例

  /* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .modal {
      background-color: theme('colors.gray.800');
      border-radius: theme('borderRadius.md');
      padding: theme('spacing.4');
      box-shadow: theme('boxShadow.lg');
    }
    /* ... */
}

通过在组件层中定义组件类，您仍然可以根据需要使用实用工具类进行调整。

示例

<!-- 无阴影的模态框 -->
<div class="modal shadow-none">
    <!-- ... -->
</div>

在 Tailwind 中，您可能会发现使用这些组件类的频率低于预期。有关如何有效重用样式的提示，请查看我们的重用样式指南。

组件层非常适合为您使用的第三方组件添加自定义样式。

示例

/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .custom-button {
      @apply bg-blue-500 text-white rounded-lg py-2 px-4;
    }
    .custom-input {
      @apply border border-gray-300 rounded-lg p-2;
    }
    .custom-card {
      @apply shadow-lg p-4 rounded-md;
    }
    /* ... */
}

使用 theme 函数或 @apply 指令将您主题中的值合并到这些自定义样式中。

添加自定义实用工具

要添加您自己的自定义实用工具类，请使用实用工具层。

示例

    /* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .text-clip {
      text-overflow: clip;
    }
}

这对于添加Tailwind默认不涵盖的 CSS 功能很有帮助。

使用修饰符与自定义 CSS

使用 @layer 添加的自定义样式将自动支持 Tailwind 的修饰符语法，用于悬停状态和响应式设计等内容。

示例

    /* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .content-auto {
      content-visibility: auto;
    }
}

示例

  <!-- HTML -->
<div class="lg:dark:content-auto">
    <!-- ... -->
</div>

有关这些修饰符如何工作的更多详细信息，请查看悬停、焦点和其他状态文档。

移除未使用的自定义 CSS

您添加到基础、组件或实用工具层的自定义样式仅在您的 HTML 中使用时才会出现在最终 CSS 中。

示例

/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    /* 仅在您的 HTML 中使用时才会包含 */
    .alert-box {
      /* ... */
    }
}

为确保某些自定义 CSS 始终包含在内，请直接将其添加到您的样式表中，而不使用 @layer 指令。

示例

/* main.css */
@tailwind base;
@tailwind components;

/* 这将始终包含在您的最终 CSS 中 */
.alert-box {
  /* ... */
}

@tailwind utilities;

请明智地定位自己以获得正确的结果。例如，我们将 .alert-box 类放在 @tailwind utilities 之前，以便如果需要，实用工具类仍然可以覆盖它。

使用多个 CSS 文件

在使用多个 CSS 文件时，请确保在用 Tailwind 处理之前将它们合并到单个样式表中。否则，您可能会收到有关 @layer 和 @tailwind 指令的错误。

您可以使用 postcss-import 插件轻松合并文件。

示例

// postcss.config.js
module.exports = {
    plugins: {
        'postcss-import': {},
        tailwindcss: {},
        autoprefixer: {},
    }
}

有关更多信息，请参阅我们的构建时导入文档。

层和每组件 CSS

在像 Vue 和 Svelte 这样的组件框架中，您可以直接在每个组件文件中的 <style> 块内添加样式。

您可以在组件样式中使用 @apply 和 theme 等功能，但 @layer 指令将无法正常工作。相反，您会遇到一个错误，表明 @layer 在没有相应 @tailwind 指令的情况下使用。

因此，请尝试不要在组件样式中使用 @layer。

示例

<!-- Modal.vue -->
<template>
    <div class="modal">
      <slot></slot>
    </div>
</template>

<style>
    /* 这将触发错误，因为 @layer 在这里不受支持 */
    @layer components {
        .modal {
          background-color: theme('colors.gray.800');
          border-radius: theme('borderRadius.md');
          padding: theme('spacing.4');
        }
    }
</style>

发生这种情况是因为像 Vue 和 Svelte 这样的框架分别处理每个 <style> 块。它们独立地在每个块上运行 PostCSS 插件，因此 Tailwind 无法组合来自不同组件的样式或正确处理 @layer。每个 <style> 块都是独立处理的，对其他块没有感知。

一种解决方案是避免在组件样式中使用 @layer。

直接应用样式而不使用 @layer。

示例

<!-- Modal.vue -->
<template>
    <div class="modal">
        <slot></slot>
    </div>
</template>

<style>
    /* 这将触发错误，因为 @layer 在这里不受支持 */
    .modal {
        background-color: theme('colors.gray.800');
        border-radius: theme('borderRadius.md');
        padding: theme('spacing.4');
    }
</style>

通过避免在组件样式中使用 @layer，您将失去对样式优先级的控制，这是由于这些工具的工作方式而导致的限制。

我们建议按照设计的方式使用 Tailwind：直接在您的 HTML 中应用 Tailwind 的实用工具类。这种方法确保您避免样式处理问题并充分利用 Tailwind 的功能。

使用 Tailwind 的实用工具类而不是编写自定义组件样式。

示例

<!-- Modal.vue -->
<template>
    <div class="bg-gray-800 rounded-md p-4">
        <slot></slot>
    </div>
</template>

通过这种方式，您可以避免样式处理问题，并充分利用 Tailwind 的实用工具类。

编写插件

与其使用单独的 CSS 文件进行自定义样式，不如通过编写自己的插件来扩展 Tailwind。

tailwind.config.js

示例

const plugin = require('tailwindcss/plugin')

module.exports = {
    // ...
    plugins: [
      plugin(function ({ addBase, addComponents, addUtilities, theme }) {
        addBase({
          'p': {
            lineHeight: theme('lineHeight.relaxed'),
          },
          'a': {
            color: theme('colors.blue.600'),
            textDecoration: 'none',
          },
        })
        addComponents({
          '.alert': {
            backgroundColor: theme('colors.red.100'),
            border: `1px solid ${theme('colors.red.300')}`,
            borderRadius: theme('borderRadius.sm'),
            padding: theme('spacing.4'),
          }
        })
        addUtilities({
          '.text-clip': {
            textOverflow: 'clip',
          }
        })
      })
    ]
}

这种方法允许您直接在您的 Tailwind 配置文件中添加自定义样式和实用工具，使您的工作流程更轻松并保持样式组织。有关创建您自己的插件的更多详细信息，请查看插件文档。

版权声明

本文仅代表作者观点，不代表本站立场。
本文系作者授权本站发表，未经许可，不得转载。

上一篇： Tailwind CSS - 重用样式 下一篇： Tailwind CSS - 函数与指令
相关文章
admin

admin

作者文章
浏览更多
热门
最新文章
标签列表
    闽ICP备2022017130号-1
    Powered By Z-BlogPHP Theme By 编程老白