การใช้ @screen directive เพื่อสร้าง Media Queries

การใช้ @screen directive เพื่อสร้าง Media Queries

ในบทความที่แล้ว เราได้เรียนรู้วิธีการสร้าง Custom Utilities ด้วย @layer utilities เพื่อสร้างคลาส CSS ที่กำหนดเอง ในบทนี้ เราจะมาเรียนรู้วิธีการใช้ @screen directive เพื่อสร้าง Media Queries ที่อ่านค่าจาก tailwind.config.js ทำให้การจัดการ Responsive Design ใน Tailwind CSS เป็นเรื่องง่ายและมีประสิทธิภาพ

Media Queries คืออะไร?

Media Queries คือส่วนสำคัญของ Responsive Web Design ที่ช่วยให้เราสามารถปรับเปลี่ยนสไตล์ของเว็บไซต์ตามขนาดหน้าจอ, ความละเอียด, หรือคุณสมบัติอื่นๆ ของอุปกรณ์ที่เข้าชมเว็บไซต์ โดย Media Queries จะกำหนดเงื่อนไขที่ CSS จะถูกนำไปใช้เมื่อเงื่อนไขนั้นเป็นจริง

ทำไมต้องใช้ @screen directive?

Tailwind CSS มี breakpoints ที่กำหนดไว้ล่วงหน้า (เช่น sm, md, lg, xl, 2xl) ซึ่งถูกกำหนดไว้ใน tailwind.config.js การใช้ @screen directive ช่วยให้เราสามารถอ้างอิง breakpoints เหล่านั้นได้อย่างง่ายดายและสอดคล้องกันทั่วทั้งโปรเจกต์ของเรา

ข้อดีของการใช้ @screen directive:

• ความสอดคล้อง: Breakpoints ถูกกำหนดไว้ในที่เดียว (tailwind.config.js) ทำให้ง่ายต่อการปรับเปลี่ยนและจัดการ
• ความสะดวก: สามารถอ้างอิง breakpoints ได้อย่างง่ายดายโดยไม่ต้องจำค่า pixel
• ความยืดหยุ่น: สามารถปรับแต่ง breakpoints ได้ตามความต้องการของโปรเจกต์

การใช้งาน @screen

@screen directive ถูกใช้ภายในไฟล์ CSS ของเรา (โดยทั่วไปคือ ./src/css/tailwind.css หรือไฟล์ CSS ที่ถูกกำหนดไว้ใน tailwind.config.js) เพื่อสร้าง Media Queries ที่อ้างอิง breakpoints ที่กำหนดไว้

รูปแบบการใช้งาน:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .my-component {
    /* Styles สำหรับทุกขนาดหน้าจอ */
    padding: 1rem;

    @screen sm {
      /* Styles สำหรับหน้าจอขนาด small ขึ้นไป */
      padding: 1.5rem;
    }

    @screen md {
      /* Styles สำหรับหน้าจอขนาด medium ขึ้นไป */
      padding: 2rem;
    }
  }
}

จากตัวอย่างข้างต้น:

• เราใช้ @layer components เพื่อกำหนด scope ให้กับคลาส .my-component
• padding: 1rem; คือสไตล์เริ่มต้นที่จะถูกนำไปใช้กับทุกขนาดหน้าจอ
• @screen sm { ... } จะกำหนด styles ที่จะถูกนำไปใช้เมื่อขนาดหน้าจอมีขนาด small ขึ้นไป (โดยค่าเริ่มต้นคือ 640px)
• @screen md { ... } จะกำหนด styles ที่จะถูกนำไปใช้เมื่อขนาดหน้าจอมีขนาด medium ขึ้นไป (โดยค่าเริ่มต้นคือ 768px)

การกำหนด Breakpoints

breakpoints ใน Tailwind CSS ถูกกำหนดไว้ในไฟล์ tailwind.config.js ภายใต้ key theme.screens

ตัวอย่าง:

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    },
  },
  plugins: [],
}

คุณสามารถปรับแต่ง breakpoints เหล่านี้ได้ตามความต้องการของโปรเจกต์ของคุณ ตัวอย่างเช่น:

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'xs': '480px',
      'sm': '640px',
      'md': '768px',
      'lg': '992px',
      'xl': '1200px',
      'custom': '1440px',
    },
  },
  plugins: [],
}

หลังจากปรับเปลี่ยน tailwind.config.js แล้ว อย่าลืม restart process ที่ compile CSS ของคุณ (เช่น npm run dev หรือ npm run watch) เพื่อให้การเปลี่ยนแปลงมีผล

การใช้งานร่วมกับ Utilities

@screen directive สามารถใช้ร่วมกับ utility classes ของ Tailwind CSS ได้อย่างง่ายดาย ทำให้เราสามารถปรับเปลี่ยน styles ของ elements ต่างๆ ได้อย่างรวดเร็วและสะดวก

ตัวอย่าง:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .responsive-text {
    font-size: 1rem; /* ขนาดเริ่มต้น */

    @screen sm {
      font-size: 1.25rem; /* ขนาดสำหรับหน้าจอ sm ขึ้นไป */
    }

    @screen md {
      font-size: 1.5rem; /* ขนาดสำหรับหน้าจอ md ขึ้นไป */
    }

    @screen lg {
      font-size: 1.75rem; /* ขนาดสำหรับหน้าจอ lg ขึ้นไป */
    }
  }
}

หรือคุณสามารถใช้ @apply เพื่อนำ utility classes มาใช้ภายใน @screen directive:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .responsive-button {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;

    @screen sm {
      @apply py-3 px-6; /* ขนาด padding ที่ใหญ่ขึ้นสำหรับหน้าจอ sm ขึ้นไป */
    }
  }
}

ในตัวอย่างนี้ เราได้นำ utility classes มาใช้เพื่อกำหนด styles พื้นฐานของปุ่ม และใช้ @screen directive เพื่อปรับขนาด padding ของปุ่มเมื่อขนาดหน้าจอมีขนาด small ขึ้นไป

ตัวอย่างการใช้งานจริง

สมมติว่าเราต้องการสร้าง card ที่มี layout ที่แตกต่างกันไปตามขนาดหน้าจอ:

HTML:

<div class="card">
  <img src="image.jpg" alt="Card Image" class="card-image">
  <div class="card-content">
    <h2 class="card-title">Card Title</h2>
    <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <a href="#" class="card-link">Learn More</a>
  </div>
</div>

CSS (Tailwind CSS):

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .card {
    @apply bg-white rounded-lg shadow-md overflow-hidden;
  }

  .card-image {
    @apply w-full h-48 object-cover; /* ขนาดเริ่มต้นสำหรับทุกขนาดหน้าจอ */

    @screen md {
      @apply h-64; /* ขนาดสำหรับหน้าจอ md ขึ้นไป */
    }
  }

  .card-content {
    @apply p-4;
  }

  .card-title {
    @apply text-xl font-bold mb-2;
  }

  .card-description {
    @apply text-gray-700 text-base;
  }

  .card-link {
    @apply inline-block bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4;
  }
}

ในตัวอย่างนี้ เราได้ปรับความสูงของรูปภาพใน card ให้แตกต่างกันไปตามขนาดหน้าจอ โดยใช้ @screen md เพื่อกำหนดความสูงใหม่เมื่อขนาดหน้าจอมีขนาด medium ขึ้นไป

สรุป

การใช้ @screen directive เป็นวิธีที่ง่ายและมีประสิทธิภาพในการสร้าง Media Queries ใน Tailwind CSS ช่วยให้เราสามารถจัดการ Responsive Design ได้อย่างสะดวกและสอดคล้องกันทั่วทั้งโปรเจกต์ โดยการอ้างอิง breakpoints ที่กำหนดไว้ใน tailwind.config.js ทำให้การปรับเปลี่ยนและบำรุงรักษาโค้ดเป็นเรื่องง่าย

ในบทถัดไป เราจะมาเรียนรู้เกี่ยวกับการใช้งาน Arbitrary Values ใน Tailwind CSS เพื่อให้เราสามารถกำหนดค่า CSS ที่ไม่ได้มีอยู่ใน utility classes ได้อย่างอิสระ