How to Use Container Queries Plugin in Tailwind?

Tailwind is a popular utility-first CSS framework that offers a collection of predefined classes for styling elements. Container queries permit users to create responsive layouts based on the size of a container element instead of the viewport. This can enable more flexible and modular design patterns, such as card components that adapt to different contexts. However, Tailwind does not support container queries by default. In this situation, there is a plugin that adds container queries support to Tailwind.

This write-up will explain the method to use the container queries plugin in Tailwind.

How to Use Container Queries Plugin in Tailwind?

To use container queries plugins in Tailwind, follow the below-provided steps:

• Install the container queries plugin in the project
• Add container queries plugin in the “tailwind.config.js” file
• Utilize the container queries plugins in the HTML program
• View the HTML web page to verify the output

Step 1: Install Container Queries Plugin in Tailwind Project

First, open the terminal and execute the provided command to install the container queries plugin in the project:

The container queries plugin has been installed successfully.

Step 2: Add Container Queries Plugin in Tailwind Config File

Then, open the “tailwind.config.js” file and add the container queries plugin in it:

This has added the container queries plugin in the configuration file.

Step 3: Use Container Queries Plugins in HTML Program

Now, make elements as a container by utilizing the “@container” class and then apply styles based on the size of that container through the container variants like “@md:”, “@lg:”, “@xl:” or “@2xl:”. For instance, we have applied the following style:

Here, in the first “<div>”, the “@container” class indicates that the parent “<div>” is a container and will be used as a reference for container query variants.

In the second “<div>”, three classes are using container query variants to apply styles based on the size of the parent container.

• The “@lg:underline” class underlines the text when the parent container reaches the “lg” (32rem) size.
• The “@2xl:text-center” class centers the text horizontally when the parent container reaches the “2xl” (42rem) size.
• The “@4xl:bg-violet-300” sets the background color to a violet shade when the parent container reaches the “4xl” (56rem) size.

Step 4: Verify Output

Finally, run the HTML program and view the web page for verification:

It can be observed that initially, the text alignment was on the left and the background color was white. But when the parent container reached “lg” size, the text was underlined. When it reached the “2xl” size, the text alignment was set to the center horizontally, and when it reached the “4xl” size, the background color changed to a violet shade. This indicates that the container query plugins are working properly in Tailwind.

Conclusion

To use container queries plugins in Tailwind, first, install the container queries plugin in the project. Then, add the container queries plugin in the “tailwind.config.js” file. After that, make an HTML program and use the container queries plugins in it. Finally, view the HTML web page to verify the output. This write-up has explained the method to use the container queries plugin in Tailwind.