Tailwind CSS 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.

html

<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

To check out a Google link, follow these simple steps. Firstly, open your preferred web browser and click on this Google link the address bar. Press Enter or click on the search button.

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:

html

<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.

html

<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

Class	Properties
content-none	content: none;

Windframe Tailwind blocks

Content

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.