Tailwind Content

The content utility class in Tailwind CSS allows you to manipulate the content of pseudo-elements, such as ::before and ::after, and control the generated content in your HTML elements. With Tailwind's content class, you can easily add text, icons, or custom styles to these pseudo-elements.

Applying Content

To apply content to a pseudo-element, you can use the content-{value}utility class, where {value} represents the desired content. Here are some examples:

• content-none: Removes the content from the pseudo-element.
• content-normal: Renders the default content (default).
• content-[attr]: Inserts the value of the specified attribute as content.
• content-[text]: Inserts the specified text as content.

<div class="w-full">
  To check out a Google link, follow these simple steps. Firstly, open your preferred web browser
  and click on this <a href="www.google.com" class="before:content-['!']">Google link</a> the
  address bar. Press Enter or click on the search button.
</div>

Preview

Custom Content

Tailwind CSS also allows you to specify custom content for pseudo-elements. You can use the content-[value] class to insert specific text or custom content. Here's an example:

<div class="after:content-[Hello]">
  <!-- Content here -->
</div>

In the above example, the <div> element has the after:content-[Hello]class, which inserts the text "Hello" as the content of the ::after pseudo-element.

Responsive Content

Tailwind CSS enables you to apply content classes responsively at different breakpoints. To use responsive content classes, you can append the breakpoint prefix to the utility class. For example, md:content-[attr:data-text] inserts the value of the data-text attribute as content starting from the medium breakpoint and above.

<div class="before:content-[attr:data-text] md:content-[attr:data-text]">
  <!-- Content here -->
</div>

In the above example, the content inserted into the ::before pseudo-element is based on the value of the data-text attribute, and starting from the medium breakpoint and above, the data-text attribute is used as content for both ::before and ::after pseudo-elements.

Tailwind Content Class Table

Windframe Tailwind blocks

Content