Use container Queries in talwind-csss

Container queries enable you to apply styles to an element based on the size of the element’s container. If, for example, a container has less space available in the surrounding context, you can hide certain elements or use smaller fonts. Container queries are an alternative to media queries, which apply styles to elements based on viewport size or other device characteristics.

Step to configure container Queries in talwind-csss

Step 1:- Run npm command

npm install @tailwindcss/container-queries

Step 2:- Then add the plugin to your tailwind.config.js file: Tailwind.config.js

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require("@tailwindcss/container-queries"),
    // ...
  ],
};

Usage

<div class="@container">
  <div class="@lg:underline">
    <!-- This text will be underlined when the container is larger than `32rem` -->
  </div>
</div>

You can use custom value also Example:

<div class="@container">
  <div class="@[17.5rem]:underline"></div>
    <!-- This text will be underlined when the container is larger than `17.5rem` -->
  </div>
</div>

By default we ship with the following configured values: