Tailwind CSS Functions & Directives

A reference for the custom functions and directives Tailwind exposes to your CSS.

Syntax:

<h1 class="text-4xl font-bold text-gray-800">Hello World</h1>

Examples:

<h1 class="text-5xl font-bold text-red-400">Welcome to Tailwind CSS</h1>

<h1 class="text-3xl font-semibold text-green-500">Tailwind CSS is Great</h1>

Output:

Explanation:

The h1 tag is used to define the heading of a website or a section on a page. Tailwind CSS provides a series of utility classes that can be used to style and customize headings. These classes allow you to set the font size, font weight, and color of a heading.

Use:

Use the text-{size} class to set the font size of the heading. Use the font-{weight} class to set the font weight of the heading. Use the text-{color} class to set the color of the heading.

Important Points:

• The text-{size} class has various sizes from 1xl to 9xl.
• The font-{weight} class has various font weights from hairline to black.
• The text-{color} class has a variety of colors that can be used.

Summary

Tailwind CSS provides several functions and directives that make it easy to style and customize HTML elements. These functions and directives include utility classes for text, background, borders, and more. By using these classes, you can quickly and easily create a responsive, mobile-first design for your website or web application.