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]"> <!-- 您的内容在此 --> </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 配置 文件中的设计标记，以实现一致的样式。
示例
<div class="grid grid-cols-[fit-content(theme(spacing.32))]"> <!-- 您的内容在此 --> </div>
此处，主题 (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)]">
<!-- Content with a blurred backdrop effect -->
</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]">
<!-- 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')]....">
<!-- 在 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]">
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)]"> 此文本使用了一个 CSS 变量。 </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 的基础层、组件层 和 实用程序层 添加自定义样式。这有助于您的样式更好地融入 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>
由于 .text-large 在 .header 之后，因此文本将为 24px，因此它具有优先权。
Tailwind 将样式组织为三个层:
- 基础层: 应用设置基本外观的默认样式，例如字体和颜色。
- 组件层: 为特定元素(例如按钮)添加样式，以便轻松重复使用。
- 实用程序层: 包含小型、单一用途的样式，这些样式可以覆盖其他层中的任何内容，从而实现精确的设计更改。
清晰地了解样式之间的交互方式，使其更易于管理。 @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;
}
}
这些方法可保持基本样式的一致性，并使其易于调整或扩展。使用主题函数或 @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 层中定义组件类，您仍然可以使用实用程序类根据需要调整它们。
示例
<!-- 无阴影的模态框 -> <div class="modal shadow-none"> <!-- ... --> </div>
在 Tailwind 中，您可能会发现使用这些 component 类的频率低于预期。有关如何有效复用样式的技巧，请参阅我们的复用样式指南。
component 层非常适合为您使用的第三方组件添加自定义样式。
示例
/* 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 {
/* This will only be included if used in your HTML */
.alert-box {
/* ... */
}
}
为确保某些自定义 CSS 始终包含在内，请将其直接添加到样式表中，而无需使用 @layer 指令。
示例
/* main.css */
@tailwind base;
@tailwind components;
/* 这将始终包含在最终的 CSS 中 */
.alert-box {
/* ... */
}
@tailwind utility;
请记住，要合理定位，以获得正确的结果。例如，我们将 .alert-box 类放在 @tailwind utility 之前，以便实用程序类在必要时仍然可以覆盖它。
使用多个 CSS 文件
使用多个 CSS 文件时，请确保在使用 Tailwind 处理之前将它们合并为一个样式表。否则，您可能会收到有关 @layer 和 @tailwind 指令的错误。
您可以使用 postcss-import 插件轻松合并文件。
// postcss.config.js
module.exports = {
plugins: {
'postcss-import': {},
tailwindcss: {},
autoprefixer: {},
}
}
更多信息，请参阅我们构建时导入文档。
图层和每个组件的 CSS
在 Vue 和 Svelte 等组件框架中，您可以直接在每个组件文件的 <style> 块内添加样式。
您可以在组件样式中使用 @apply 和主题等功能，但 @layer 指令将无法正常运行。相反，您会遇到一个错误，提示您使用了 @layer 而没有相应的 @tailwind 指令。
因此，请尽量不要在组件样式中使用 @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 配置文件中添加自定义样式和实用程序，从而简化工作流程并保持样式井然有序。有关创建您自己的插件的更多详细信息，请参阅插件文档。
