Helper Classes

For all common styling needs, it is recommended to use Tailwind's utility classes. Refer to the official Tailwind Documentation for a comprehensive list of available utilities.

With our extended low-level utility classes, you can build and customize components effortlessly—without writing a single line of custom CSS or SASS.

Background color

Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities do not set color, so in some cases you’ll want to use .text-* color utilities.

Background utilities like .bg-* that generated from our tailwind dedicated color variables.
.bg-primary
.bg-lightprimary
.bg-secondary
.bg-lightsecondary
.bg-success
.bg-lightsuccess
.bg-error
.bg-lighterror
.bg-warning
.bg-lightwarning
.bg-info
.bg-lightinfo
.bg-body
.bg-black
.bg-white
.bg-transparent
                    
<div className="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div className="p-3 mb-2 bg-lightprimary text-primaryemphasis">.bg-lightprimary</div>
<div className="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div className="p-3 mb-2 bg-lightsecondary text-secondaryemphasis">.bg-lightsecondary</div>
<div className="p-3 mb-2 bg-success text-white">.bg-success</div>
<div className="p-3 mb-2 bg-lightsuccess text-successemphasis">.bg-lightsuccess</div>
<div className="p-3 mb-2 bg-error text-white">.bg-danger</div>
<div className="p-3 mb-2 bg-lighterror text-erroremphasis">.bg-lighterror</div>
<div className="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div className="p-3 mb-2 bg-lightwarning text-warningemphasis">.bg-lightwarning</div>
<div className="p-3 mb-2 bg-info text-dark">.bg-info</div>
<div className="p-3 mb-2 bg-lightinfo text-info-emphasis">.bg-lightinfo</div>
<div className="p-3 mb-2 bg-body text-body">.bg-body</div>
<div className="p-3 mb-2 bg-black text-white">.bg-black</div>
<div className="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div className="p-3 mb-2 bg-transparent text-body">.bg-transparent</div>

Border

Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time. 

                    
<span class="border"></span>
<span class="border-t"></span>
<span class="border-e"></span>
<span class="border-b"></span>
<span class="border-s"></span>

Colors

Colorize text with color utilities.

Color utilities like .text-* that generated from our tailwind dedicated color css variables.

.text-primary

.text-primaryemphasis

.text-secondary

.text-secondaryemphasis

.text-success

.text-successemphasis

.text-error

.text-erroremphasis

.text-warning

.text-warningemphasis

.text-info

.text-infoemphasis

.text-dark

.text-body

.text-black

.text-white

.text-gray-50

                    
<p className="text-primary">.text-primary</p>
<p className="text-primaryemphasis">.text-primaryemphasis</p>
<p className="text-secondary">.text-secondary</p>
<p className="text-secondaryemphasis">.text-secondaryemphasis</p>
<p className="text-success">.text-success</p>
<p className="text-successemphasis">.text-successemphasis</p>
<p className="text-error">.text-error</p>
<p className="text-erroremphasis">.text-erroremphasis</p>
<p className="text-warning bg-dark">.text-warning</p>
<p className="text-warningemphasis">.text-warningemphasis</p>
<p className="text-info bg-dark">.text-info</p>
<p className="text-infoemphasis">.text-infoemphasis</p>
<p className="text-light-emphasis">.text-light-emphasis</p>
<p className="text-dark bg-white">.text-dark</p>

<p className="text-body">.text-body</p>

<p className="text-black bg-white">.text-black</p>
<p className="text-white bg-dark">.text-white</p>
<p className="text-gray-50 bg-white">.text-gray-50</p>

Opacity

The opacity property sets the opacity level for an element. The opacity level describes the transparency level, where 1 is not transparent at all, .5 is 50% visible, and 0 is completely transparent.

100%
75%
50%
25%
0%
                    
<div className="flex items-center gap-3">
  <div className="opacity-100 p-3 bg-primary text-light font-bold rounded-md">100%</div>
  <div className="opacity-75 p-3 bg-primary text-light font-bold rounded-md">75%</div>
  <div className="opacity-50 p-3 bg-primary text-light font-bold rounded-md">50%</div>
  <div className="opacity-25 p-3 bg-primary text-light font-bold rounded-md">25%</div>
  <div className="opacity-0 p-3 bg-primary text-light font-bold rounded-md">0%</div>
</div>

Shadows

You can quickly add or remove a shadow with our box-shadow utility classes. Includes support for .shadow-none and three default sizes (which have associated variables to match).

No shadow
Small shadow
Regular shadow
Larger shadow
                    
<div className="shadow-none p-3 mb-5 bg-lightprimary rounded">No shadow</div>
<div className="shadow-sm p-3 mb-5 bg-lightprimary rounded">Small shadow</div>
<div className="shadow p-3 mb-5 bg-lightprimary rounded">Regular shadow</div>
<div className="shadow-lg p-3 mb-5 bg-lightprimary rounded">Larger shadow</div>

Sizing

Utilities for setting the width of an element. Use w-full or w-< fraction > utilities like w-1/2 and w-2/5 to give an element a percentage-based width:

Width 25%
Width 50%
Width 75%
Width 100%
Width auto
                    
<div className="w-1/4 p-3 bg-lightprimary text-primary border border-primary">Width 25%</div>
<div className="w-1/2 p-3 bg-lightprimary text-primary border border-primary">Width 50%</div>
<div className="w-3/4 p-3 bg-lightprimary text-primary border border-primary">Width 75%</div>
<div className="w-full p-3 bg-lightprimary text-primary border border-primary">Width 100%</div>
<div className="w-auto p-3 bg-lightprimary text-primary border border-primary">Width auto</div>
Height 25%
Height 50%
Height 75%
Height 100%
Height auto
                    
<div style="height: 100px;">
  <div className="h-1/4 p-3 d-inline-block bg-lightprimary text-primary border border-primary">Height 25%</div>
  <div className="h-1/2 p-3 d-inline-block bg-lightprimary text-primary border border-primary">Height 50%</div>
  <div className="h-3/4 p-3 d-inline-block bg-lightprimary text-primary border border-primary">Height 75%</div>
  <div className="h-full p-3 d-inline-block bg-lightprimary text-primary border border-primary">Height 100%</div>
  <div className="h-auto p-3 d-inline-block bg-lightprimary text-primary border border-primary">Height auto</div>
</div>

Text

Quickly style and customize text elements using text utilities—ideal for controlling font size, color, weight, alignment, and more.

Text alignment

Start aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

End aligned text on all viewport sizes.

End aligned text on viewports sized SM (small) or wider.

End aligned text on viewports sized MD (medium) or wider.

End aligned text on viewports sized LG (large) or wider.

End aligned text on viewports sized XL (extra large) or wider.

End aligned text on viewports sized XXL (extra extra large) or wider.

                    
<p className="text-left">Start aligned text on all viewport sizes.</p>
<p className="text-center">Center aligned text on all viewport sizes.</p>
<p className="text-right">End aligned text on all viewport sizes.</p>

<p className="sm:text-right">End aligned text on viewports sized SM (small) or wider.</p>
<p className="md:text-right">End aligned text on viewports sized MD (medium) or wider.</p>
<p className="lg:text-right">End aligned text on viewports sized LG (large) or wider.</p>
<p className="xl:text-right">End aligned text on viewports sized XL (extra large) or wider.</p>
<p className="xxl:text-right">End aligned text on viewports sized XXL (extra extra large) or wider.</p>
Text transform

Lowercased text.

Uppercased text.

CapiTaliZed text.

                    
<p className="lowercase">Lowercased text.</p>
<p className="uppercase">Uppercased text.</p>
<p className="capitalize">CapiTaliZed text.</p>
Font size

.text-2xl text

.text-xl text

.text-lg text

.text-base text

.text-sm text

.text-xs text

                    
<p className="text-2xl">.text-2xl text</p>
<p className="text-xl">.text- text</p>
<p className="text-lg">.text-lg text</p>
<p className="text-base">.text-base text</p>
<p className="text-sm">.tesm text</p>
<p className="text-xs">.text-xs text</p>
Font weight and italics

Bold text.

Semibold weight text.

Medium weight text.

Normal weight text.

Light weight text.

Italic text.

Text with normal font style

                    
<p className="font-bold">Bold text.</p>
<p className="font-semibold">Semibold weight text.</p>
<p className="font-medium">Medium weight text.</p>
<p className="font-normal">Normal weight text.</p>
<p className="font-light">Light weight text.</p>
<p className="italic">Italic text.</p>
<p className="normal">Text with normal font style</p>
Line height

This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

                    
<p className="leading-none">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p className="leading-6">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p className="leading-7">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p className="leading-8">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
Text decoration

This text has a line underneath it.

This text has a line going through it.

This link has its text decoration removed 
                    
<p className="underline">This text has a line underneath it.</p>
<p className="line-through">This text has a line going through it.</p>
<a href="#" className="underline-none">This link has its text decoration removed</a>