Tailwind CSS dan Desain Responsif

Tailwind CSS secara default menggunakan desain responsif. Ini dicapai dengan menggunakan sistem breakpoint yang berfokus pada perangkat mobile. Sistem ini bekerja dengan menerapkan gaya yang berbeda pada ukuran viewport yang berbeda melalui serangkaian kelas CSS yang telah ditentukan sebelumnya. Kelas-kelas ini digunakan bersamaan dengan direktif screen dalam stylesheet Anda.

Breakpoint default Tailwind adalah:

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px
• 2xl: 1536px

Anda dapat menambahkan prefix kelas ini untuk menerapkan gaya pada breakpoint-breakpoint ini. Misalnya:

<div class="text-sm md:text-lg lg:text-xl">Responsive Text</div>

Pada contoh ini, ukuran teks akan menjadi sm secara default, lalu berubah menjadi lg pada breakpoint md (768px), dan kemudian menjadi xl pada breakpoint lg (1024px).

Jika Anda ingin menyesuaikan breakpoint-breakpoint ini, Anda dapat melakukannya dengan memodifikasi file tailwind.config.js:

module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      'laptop': '1024px',
      'desktop': '1280px',
    },
  },
  variants: {},
  plugins: [],
}

Pada contoh ini, kita telah menentukan nama khusus untuk breakpoint kita: tablet, laptop, dan desktop. Kita dapat menggunakan ini dalam HTML kita seperti yang kita lakukan pada breakpoint default.

<div class="text-sm tablet:text-md laptop:text-lg desktop:text-xl">Responsive Text</div>

Referensi

https://tailwindcss.com/docs/responsive-design