How to Use the Tailwind Play CDN

“Tailwind CSS” is the first popular tool to apply CSS on HTML projects without navigating to any external CSS file. It is quite simple and easy to use. The user can implement its styling classes in the created projects through the “CLI” tool and the “Play CDN”. The “PlayCDN” is the “Content Delivery Network” that implements the Tailwind CSS in the specified HTML document without building it. It does not require any configuration file, unlike the “CLI” tool that runs the CSS from scratch. It is only used for the development of smaller-level projects and is not suitable for website creation.

This write-up provides the complete procedure for using the Tailwind “Play CDN”.

How to Use the Tailwind Play CDN?

The “Play CDN” is considered the easiest way to use the Tailwind CSS in an HTML document without embedding any external CSS file.

The following section carries out some essential steps to perform this task.

Step 1: Add “Play CDN” From the Tailwind Official Website
First, open the Tailwind official website with the help of the provided link “https://tailwindcss.com/docs/installation/play-cdn”, copy the “Play CDN” script and place it in the head section of your code, as follows:

Step 2: Customize the HTML Content Using Tailwind Built-in Classes
Once the CDN is added, use the built-in Tailwind classes to customize your HTML content. Here in this section, the “Font Size”, “Text Align”, and the “Text Color” classes are used to customize the specified HTML elements i.e., “<h2>” and “<p>”, respectively:

In the above code lines:

• The “<h2>” tag defines the subheading.
• The added “<h2>” tag uses the three built-in Tailwind classes, “Font Size” to enlarge the added heading element up to the specified fixed size i.e., font size (1.875rem/30px), line height (2.25rem/ 36px), “Text Align” to set the alignment at the “center”, and “Text Color” to set the specified color with its pre-defined occurrence i.e., RGB (185 28 28).
• Next, the “<p>” tag also utilizes the “Font Size” class to increase the font size of the paragraph element upto “xl (extra-large)” having font size (1.25rem/20px), line height (1.75rem/28px), “Text Align” to “center”, and the “Background Color” that gives it the specified background color.

Output

The output shows the customized HTML content using Tailwind CSS.

Step 3: Customize the Tailwind Configuration
Apart from the built-in classes, Tailwind also allows users to beautify the HTML content with the help of their own custom classes. It can be done by adding the given script in the HTML file after the “Play CDN” to customize its configuration:

In the above code:

• The “tailwind” object refers to the pre-defined “config” function inside the internal CSS which is embedded through the Tailwind Play CDN.
• In the “config” function, the first fixed attribute is “theme” which contains a large variety of colors.
• The “extend” is the keyword that extends the specified color.
• The “colors” keyword specifies the key-value pair that includes the “name” of the color and the “value” of the color i.e., color code.
• Here, a user-defined color named “mycolor” is added that needs to be applied.

Let’s apply the user-defined color class to the HTML element.

HTML Code

Here, the user-defined class “mycolor” is added to the given HTML element to apply the corresponding color to it.

Output

As seen, the given “<h2>” element color is customized in accordance with the user-defined color class.

Conclusion

“Tailwind CSS” can be implemented easily into an HTML document by specifying its “Play CDN” in the header section of the HTML document. It automatically embeds the internal CSS that contains a large variety of classes to beautify the HTML document. Apart from it, it can also be extended with the help of additional user-defined classes. This write-up demonstrated the complete procedure for using the Tailwind Play CDN in HTML.