tailwindcss 的默认样式

44 min read

tailwindcss 的默认样式

针对Tailwind项目的一套自定的基本样式。

概述

预设样式旨在消除跨浏览器的不一致，并使您更轻松地在设计系统的现有的约定内工作。

当您包含@tailwind base在CSS中时，Tailwind会自动注入以下样式：

@tailwind base; /* Preflight will be injected here */

@tailwind components;

@tailwind utilities;

有关所有预设样式，请参见stylesheet。

默认边距已删除

预设样式的标题，块引用，段落等元素中删除所有默认边距。

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

标题未设置样式

默认情况下，所有标题元素都是完全未设置样式的，并且其字体大小和字体粗细与普通文本相同。

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

其原因有两个：

  • 它可以帮助您避免意外偏离类型标尺。默认情况下，浏览器会将大小分配给Tailwind的默认类型比例尺中不存在的标题，并且不能保证您自己的类型比例尺中存在标题。

  • 在UI开发中，通常应在视觉上强调标题。默认情况下，将标题设置为无样式意味着您对标题应用的任何样式都会有意识地故意进行。

您始终可以通过添加自己的基本样式来将默认标题样式添加到项目中。

如果您想将明智的默认标题样式选择性地引入页面的文章样式部分，我们建议使用@ tailwindcss / typography插件。

列表没有样式

默认情况下，有序列表和无序列表是无样式的，没有项目符号/数字，没有边距或填充。

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

如果您想为列表设置样式，则可以使用list-style-type和list-style-position实用程序进行设置：

<ul class="list-disc list-inside">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

您始终可以通过添加自己的基本样式将默认列表样式添加到项目中。

如果您想选择性地将默认列表样式引入页面的文章样式部分，我们建议使用@ tailwindcss / typography插件。

图像是块级的

图像和其他替代元素（如svg，video，canvas，和其他人）是display: block默认。

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

这有助于避免使用浏览器默认值经常遇到的意外对齐问题display: inline。

如果您需要用以下元素之一inline代替block，则只需使用该inline实用程序：

<img class="inline" src="..." alt="...">

边框样式已全局重置

为了简化添加边框的步骤border，Tailwind使用以下规则覆盖了所有元素的默认边框样式：

*,
::before,
::after {
  border-width: 0;
  border-style: solid;
  border-color: theme('borderColor.default', currentColor);
}

由于border该类仅设置border-width属性，因此此重置可确保添加该类时始终使用您配置的默认边框颜色添加纯1px边框。

集成某些第三方库（例如Google地图）时，这可能会导致意外结果。

当遇到这种情况时，可以通过使用自己的自定义CSS覆盖Preflight样式来解决它们：

.google-map * {
  border-style: none;
}

按钮具有默认轮廓

为确保我们提供开箱即用的样式，我们确保按钮具有默认轮廓。您当然可以通过focus:ring对按钮应用或类似的实用程序来覆盖它。

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

扩展预设样式

如果您想在预设样式之上添加自己的基本样式，只需在@layer base指令中将它们添加到CSS中即可：

@tailwind base;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
  h3 {
    @apply text-lg;
  }
  a {
    @apply text-blue-600 underline;
  }
}

@tailwind components;

@tailwind utilities;

在添加基本样式文档中了解更多信息。

关闭预设样式

如果您想完全禁用预设样式（可能是因为要将Tailwind集成到现有项目中，或者是因为您想提供自己的基本样式），则preflight只需false在文件corePlugins部分中设置tailwind.config.js：

// tailwind.config.js
  module.exports = {
    corePlugins: {
+     preflight: false,
    }
  }