How in tailwindcss image on different devices with different width?

HTML-CSS
1

Working with css on different devices when I need to show image on different devices
with different width I do:

    @media only screen and (min-width: 1280px) { /* Extra large ≥ 1200px  */
    
      .category_image {
        max-width: 1030px;
        height: auto;
        padding: 1px;
        border: $border-separator-color;
      }
    ...
    
    @media only screen and (min-width: 768px) and (max-width: 991px) { /* Ipad Pro md */
    
      .category_image {
        max-width: 580px;
        height: auto;
        padding: 1px;
        border: $border-separator-color;
      }

Now working with tailwindcss 2 I wonder if there a better way for this purpose?

Thanks!

2

You can use breakpoints. Something like this class=“md:w-1 sm:w-1”

1 Like
3

is w-1 my custom class or predefined class?

4

Predefined class, you almost won’t need custom class.

1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.