● 新しいメディアクエリの書き方

@media (width < 640px) {
    .myclass {
        padding: 0 4px;
    }
}
@media (768px <= width < 1024px) {
    .myclass {
        padding: 0 8px;
    }
}
@media (1024px <= width < 1280px) {
    .myclass {
        padding: 0 16px;
    }
}
@media (1280px <= width) {
    .myclass {
        padding: 0 16px;
    }
}

● Tailwind CSS 互換のブレイクポイント

/* Tailwind CSS Default Breakpoints using modern syntax */

/* xs: Extra small devices (モバイル) */
@media (width < 640px) {
  /* xs breakpoint styles */
}

/* sm: Small devices (640px to 767px) */
@media (640px <= width < 768px) {
  /* sm breakpoint styles */
}

/* md: Medium devices (768px to 1023px) */
@media (768px <= width < 1024px) {
  /* md breakpoint styles */
}

/* lg: Large devices (1024px to 1279px) */
@media (1024px <= width < 1280px) {
  /* lg breakpoint styles */
}

/* xl: Extra large devices (1280px to 1535px) */
@media (1280px <= width < 1536px) {
  /* xl breakpoint styles */
}

/* 2xl: 2 Extra large devices (1536px and up) */
@media (width >= 1536px) {
  /* 2xl breakpoint styles */
}

/* 使用例: */

.responsive-element {
  /* モバイルファースト用のスタイル */
}

@media (width < 768px) {
  .responsive-element {
    /* モバイル用スタイル */
    font-size: 14px;
  }
}

@media (768px <= width < 1024px) {
  .responsive-element {
    /* タブレット用スタイル */
    font-size: 16px;
  }
}

@media (width >= 1024px) {
  .responsive-element {
    /* デスクトップ用スタイル */
    font-size: 18px;
  }
}