Tailwind CSS home page
  1. 排版
  2. 内容

Quick reference

Class
Properties
content-nonecontent: none;

基本用法

¥Basic usage

设置伪元素的内容

¥Setting a pseudo-element’s content

使用 content-* 工具以及 before 和 after 变体修饰符来设置 ::before 和 ::after 伪元素的内容。

¥Use the content-* utilities along with the before and after variant modifiers to set the contents of the ::before and ::after pseudo-elements.

开箱即用，content-none 是唯一可用的预配置内容工具。虽然你可以通过 定制你的主题 添加其他工具，但通常只使用任意值更有意义。

¥Out of the box, content-none is the only available preconfigured content utility. And while you can add additional utilities by customizing your theme, it generally makes more sense to just use an arbitrary value.

使用方括号表示法动态定义任意内容值。

¥Use the square bracket notation to define any arbitrary content value on the fly.

Higher resolution means more than just a better-quality image. With a Retina 6K display, Pro Display XDR gives you nearly 40 percent more screen real estate than a 5K display. 
Higher resolution means more than just a better-quality image. With a Retina
6K display, <a class="text-blue-600 after:content-['_↗'] ..." href="https://www.
apple.com/pro-display-xdr/" target="_blank">Pro Display XDR</a> gives you
nearly 40 percent more screen real estate than a 5K display.

引用属性值

¥Referencing an attribute value

这些内容工具甚至支持 attr() 函数等 CSS 功能，你可以使用它来引用存储在属性中的值：

¥These content utilities even support CSS features like the attr() function, which you can use to reference a value stored in an attribute:

<div before="Hello World" class="before:content-[attr(before)]">
  <!-- ... -->
</div>

使用空格和下划线

¥Using spaces and underscores

由于空格表示 HTML 中类的结尾，因此用下划线替换任意值中的任何空格：

¥Since whitespace denotes the end of a class in HTML, replace any spaces in an arbitrary value with an underscore:

<div class="before:content-['Hello_World']">
  <!-- ... -->
</div>

如果你需要包含一个实际的下划线，你可以通过用反斜杠转义它来做到这一点：

¥If you need to include an actual underscore, you can do this by escaping it with a backslash:

<div class="before:content-['Hello\_World']">
  <!-- ... -->
</div>

有条件地应用

悬停、聚焦和其他状态

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:before:content-['Hovering'] to only apply the before:content-['Hovering'] utility on hover.

<div class="before:content-['Not_Hovering'] hover:before:content-['Hovering']">
  <!-- ... -->
</div>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

断点和媒体查询

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:before:content-['Desktop'] to apply the before:content-['Desktop'] utility at only medium screen sizes and above.

<div class="before:content-['Mobile'] md:before:content-['Desktop']">
  <!-- ... -->
</div>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.

使用自定义值

¥Using custom values

自定义主题

¥Customizing your theme

默认情况下，Tailwind 仅提供 content-none 工具。你可以通过编辑 tailwind.config.js 文件中的 theme.content 或 theme.extend.content 来自定义这些值。

¥By default, Tailwind only provides the content-none utility. You can customize these values by editing theme.content or theme.extend.content in your tailwind.config.js file.

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      content: {
        'link': 'url("/icons/link.svg")',
      },
    }
  }
}

在 主题定制 文档中了解有关自定义默认主题的更多信息。

¥Learn more about customizing the default theme in the theme customization documentation.

任意值

¥Arbitrary values

If you need to use a one-off content value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

<div class="before:content-['Hello_World']">
  <!-- ... -->
</div>

Learn more about arbitrary value support in the arbitrary values documentation.