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">
        This is a styled div with custom spacing, 
        border color, and font size.
</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">Card Title</h2>
            This is an example card with custom border width and padding.
            The background color is a light gray, and additional 
            styling includes rounded corners and a shadow effect.
    </div>
</body>

</html>

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

您可以使用诸如间距和定位之类的**任意值**。以下是如何使用特定值定位元素并使其具有响应性的示例。

示例

<div class="top-[117px] lg:top-[344px]">
      <!-- Your content here -->
</div>

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

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

示例

<div class="bg-[#bada55] text-[22px] before:content-['Festivus']">
    <!-- Your content here -->
</div>

此处，**bg-[#bada55]** 更改背景颜色，**text-[22px]** 设置字体大小，而**before:content-['Festivus']** 在内容前添加“**Festivus**”。

您可以引用来自您的**Tailwind 配置**文件的 design tokens 以实现一致的样式。

示例

<div class="grid grid-cols-[fit-content(theme(spacing.32))]">
    <!-- Your content here -->
</div>

此处，theme **(spacing.32)** 从您的**tailwind.config.js**中获取间距值。

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

示例

<div class="bg-[--my-color]">
    <!-- Your content here -->
</div>

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

任意属性

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

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

示例

<div class="blurred-bg [backdrop-filter:blur(10px)]">
    <!-- Content with a blurred backdrop effect -->
</div>

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

示例

<div class="blurred-bg [backdrop-filter:blur(10px)] hover:[backdrop-filter:blur(20px)]">
    <!-- Content with a blurred backdrop effect -->
</div>

**Tailwind CSS**的任意值可用于根据屏幕大小等条件调整 CSS 变量。例如，使用在不同屏幕尺寸下变化的 CSS 变量设置填充

示例

<div class="dynamic-padding [--padding-size:20px] 
            md:[--padding-size:40px] lg:[--padding-size:60px]">
    <!-- Content with padding based on screen size -->
</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]">
              Hover Over Me
    </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]">
        This text has a line height of 2rem.
    </div>
</body>

</html>

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

示例

<div class="bg-[url('/hello_to_world.png')]....">
    <!-- Example of using underscores in URLs -->
</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]">
          This text has a font size of 22px.
      </div> 
      <div class="text-[#67aa55]">
          This text has a color defined by a hex code.
      </div>
</body>

</html>

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

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

示例

<div class="text-[var(--my-value)]">
    This text uses a CSS variable.
</div>

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

为了阐明应如何使用var(--my-value)，您可以显式指定类型。这有助于Tailwind准确理解如何应用CSS变量。

如果--my-value意在作为字体大小，或者--my-value意在作为颜色，则应按此方式使用它。

示例

<!-- Font size using CSS variable -->
<div class="text-[length:var(--font-size)]">
    This text uses a CSS variable for font size.
</div>

<!-- Color using CSS variable -->
<div class="text-[color:var(--text-color)]">
    This text uses a CSS variable for color.
</div>

使用CSS和@layer

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

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

示例

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

.custom-button {
    background-color: #4a90e2; /* Custom background color */
    border-radius: 12px;      /* Custom border radius */
    color: white;              /* Custom text color */
    padding: 10px 20px;        /* Custom padding */
    text-align: center;        /* Center text */
}

为了获得更多控制，可以使用@layer指令将自定义样式添加到Tailwind的base、components和utilities层。这有助于您的样式与Tailwind的现有系统很好地融合。

示例

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

@layer components {
    .custom-button {
        background-color: #4a90e2; /* Custom background color */
        border-radius: 12px;      /* Custom border radius */
        color: white;              /* Custom text color */
        padding: 10px 20px;        /* Custom padding */
        text-align: center;        /* Center text */
        box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Custom shadow */
        font-size: 16px;           /* Custom font size */
    }
}

为什么Tailwind将样式分组到不同的层？

Tailwind将样式分组到不同的层中，以管理它们如何交互以及哪个样式具有优先级。这种方法有助于防止冲突，并确保样式以一致且有序的方式应用。

示例

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

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

示例

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

文本将为24px，因为.text-large在.header之后，因此它具有优先级。

Tailwind将样式组织到三个层

  • 基础层 (Base Layer): 应用设置基本外观和感觉的默认样式，例如字体和颜色。
  • 组件层 (Components Layer): 为特定元素（例如按钮）添加样式，您可以轻松重复使用这些样式。
  • 实用程序层 (Utilities Layer): 包含小的、单一用途的样式，可以覆盖其他层中的任何内容，以进行精确的设计更改。

明确样式的交互方式使它们更容易管理。@layer指令帮助您控制样式的最终顺序，同时允许您根据需要组织代码。

Tailwind CSS中的@layer指令允许您将自定义样式添加到Tailwind的现有层中。它使您的样式井然有序，与Tailwind的实用程序配合良好，并支持诸如修饰符和tree-shaking等功能，从而提高性能。

在Tailwind CSS中添加基础样式

要在Tailwind CSS中为页面设置默认样式（例如文本颜色或背景颜色），只需直接在您的<html>或<body>元素中添加类。

示例

<!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">My Website</h1>
    </header>
    <main class="mt-6">
        <h2 class="text-2xl font-medium mb-4">Introduction</h2>
        <p class="text-base leading-relaxed">
            This is a sample page showing custom base styles. 
            The text color is set to a dark gray, the background
            is white, and the font is sans-serif for a modern look.
        </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指令将您主题中的值包含在您的自定义基础样式中。

添加组件类

使用components层为您的项目添加更复杂的类，同时仍然允许使用实用程序类进行覆盖。

传统上，您可能会在此类别中包含诸如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');
    }
    /* ... */
}

通过在components层中定义组件类，您仍然可以使用实用程序类根据需要调整它们。

示例

<!-- Modal with no shadow -->
<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指令将您主题中的值合并到这些自定义样式中。

添加自定义实用程序

要添加您自己的自定义实用程序类，请使用utilities层。

示例

    /* 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

添加到base、components或utilities层的自定义样式，只有在HTML中使用时才会出现在最终CSS中。

示例

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

@layer components {
    /* This will only be included if used in your HTML */
    .alert-box {
      /* ... */
    }
}

要确保始终包含某些自定义CSS，请直接将其添加到样式表中，而无需使用@layer指令。

示例

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

/* This will always be included in your final 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>块中添加样式。

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

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

示例

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

<style>
    /* This will trigger an error because @layer isn't supported here */
    @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>
    /* This will trigger an error because @layer isn't supported here */
    .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配置文件中添加自定义样式和实用程序，使您的工作流程更轻松，并保持样式井然有序。有关创建您自己的插件的更多详细信息，请查看插件文档。

打印页面
上一页
下一页
广告