Tailwind CSS and Web Components

Tailwind CSS and Web Components

Web Components เป็นชุดของมาตรฐานเว็บที่ช่วยให้เราสร้าง elements ที่สามารถนำกลับมาใช้ใหม่ได้ในเว็บแอปพลิเคชันของเรา โดยที่ elements เหล่านี้ encapsulated (ห่อหุ้ม) ทั้ง markup, style และ behavior ของตัวเอง ทำให้ง่ายต่อการนำไปใช้ในโปรเจกต์ต่างๆ และลดปัญหา conflicts ของ CSS และ JavaScript

Tailwind CSS สามารถใช้ร่วมกับ Web Components ได้อย่างมีประสิทธิภาพ โดยเราสามารถใช้ Tailwind classes เพื่อ style Web Components ของเราได้ แต่ก็มีข้อควรระวังและเทคนิคบางอย่างที่เราต้องคำนึงถึงเพื่อให้การทำงานร่วมกันเป็นไปอย่างราบรื่น

Shadow DOM

Shadow DOM เป็นส่วนสำคัญของ Web Components ที่ช่วยให้เราสร้าง encapsulation ได้อย่างแท้จริง Shadow DOM ช่วยสร้าง DOM tree ที่แยกจาก DOM tree หลักของหน้าเว็บ ทำให้ styles ที่อยู่ใน Shadow DOM ไม่ส่งผลกระทบต่อ styles ภายนอก และในทางกลับกัน styles ภายนอกก็ไม่ส่งผลกระทบต่อ styles ภายใน Shadow DOM

เมื่อใช้ Tailwind CSS กับ Web Components ที่มี Shadow DOM เราต้องคำนึงถึงเรื่องนี้เป็นพิเศษ เพราะ Tailwind classes ที่เราใส่ใน Web Component จะมีผลเฉพาะใน Shadow DOM เท่านั้น

ตัวอย่างเช่น:

class MyButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' }); // Create the shadow DOM
    this.shadowRoot.innerHTML = `
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        <slot>Click Me</slot>
      </button>
    `;
  }
}

customElements.define('my-button', MyButton);

ในตัวอย่างนี้ เราสร้าง Web Component ชื่อ my-button และใช้ Tailwind classes เพื่อ style button ที่อยู่ใน Shadow DOM classes เหล่านี้จะไม่มีผลกับ elements อื่นๆ นอก Shadow DOM

ข้อควรระวัง: เนื่องจาก Tailwind CSS ทำงานโดยการ generate CSS classes ในระหว่าง build time ดังนั้น classes ที่ใช้ใน Shadow DOM จะต้องถูก purge อย่างถูกต้อง เพื่อให้แน่ใจว่า classes ที่ไม่ได้ใช้ออกไปจาก bundle สุดท้าย หากไม่ได้ตั้งค่า purge อย่างถูกต้อง ไฟล์ CSS อาจมีขนาดใหญ่โดยไม่จำเป็น

Custom Elements

Custom Elements เป็นอีกส่วนประกอบสำคัญของ Web Components ที่ช่วยให้เราสร้าง HTML elements ของเราเองได้ เราสามารถ define behavior และ markup ของ Custom Elements ได้ตามต้องการ

การสร้าง Custom Elements ที่ใช้ Tailwind CSS ทำได้โดยการกำหนด Tailwind classes ใน template ของ Custom Element นั้นๆ

ตัวอย่างเช่น:

class MyCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <div class="bg-white shadow-md rounded-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="${this.getAttribute('image')}" alt="${this.getAttribute('title')}">
        <div class="p-4">
          <h2 class="text-xl font-semibold mb-2">${this.getAttribute('title')}</h2>
          <p class="text-gray-700">${this.getAttribute('description')}</p>
        </div>
      </div>
    `;
  }
}

customElements.define('my-card', MyCard);

ในตัวอย่างนี้ เราสร้าง Custom Element ชื่อ my-card และใช้ Tailwind classes เพื่อ style card ที่อยู่ใน Shadow DOM เราสามารถ set attributes image, title, และ description เพื่อกำหนดเนื้อหาของ card

เหตุผลเชิงออกแบบ: การใช้ Custom Elements ช่วยให้เราสร้าง components ที่ reusable และ maintainable มากขึ้น เราสามารถนำ Custom Elements ไปใช้ในโปรเจกต์ต่างๆ ได้โดยไม่ต้องกังวลเรื่อง CSS conflicts หรือ JavaScript dependencies

Styling Web Components

มีหลายวิธีในการ style Web Components ที่ใช้ Tailwind CSS:

• Inline Styles: การใส่ Tailwind classes โดยตรงใน template ของ Web Component (ดังที่แสดงในตัวอย่างก่อนหน้า)
• CSS Variables: การใช้ CSS variables เพื่อกำหนดค่าต่างๆ ใน Web Component และใช้ Tailwind classes เพื่อ style CSS variables เหล่านั้น
• Constructible Stylesheets: การใช้ Constructible Stylesheets API เพื่อสร้าง CSSStyleSheet object และ apply ให้กับ Shadow DOM

CSS Variables Example:

class MyAlert extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          --alert-background-color: theme(colors.red.500);
          --alert-text-color: theme(colors.white);
        }
        .alert {
          background-color: var(--alert-background-color);
          color: var(--alert-text-color);
          padding: 1rem;
          border-radius: 0.25rem;
        }
      </style>
      <div class="alert">
        <slot></slot>
      </div>
    `;
  }
}

customElements.define('my-alert', MyAlert);

ในตัวอย่างนี้ เรากำหนด CSS variables --alert-background-color และ --alert-text-color และใช้ var() function เพื่อใช้ CSS variables เหล่านั้นใน style ของ .alert class เรายังใช้ theme() function ของ Tailwind CSS เพื่อเข้าถึงค่าสีจาก Tailwind config file

Constructible Stylesheets Example:

class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });

    // Create a CSSStyleSheet
    const sheet = new CSSStyleSheet();
    sheet.replaceSync(`
      .my-class {
        @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
      }
    `);

    // Apply the stylesheet to the shadow DOM
    this.shadow.adoptedStyleSheets = [sheet];

    this.shadow.innerHTML = `<div class="my-class">Hello, World!</div>`;
  }
}

customElements.define('my-component', MyComponent);

ในตัวอย่างนี้ เราสร้าง CSSStyleSheet object และใช้ @apply directive ของ Tailwind CSS เพื่อกำหนด styles ให้กับ .my-class class จากนั้นเรา apply stylesheet ให้กับ Shadow DOM โดยใช้ adoptedStyleSheets property

Trade-offs:

• Inline Styles: ง่ายต่อการใช้งาน แต่ไม่สามารถ reuse styles ได้
• CSS Variables: ช่วยให้เรากำหนดค่าต่างๆ ได้อย่าง dynamic แต่ต้องใช้ theme() function เพื่อเข้าถึงค่าจาก Tailwind config file
• Constructible Stylesheets: ช่วยให้เรา reuse styles ได้ แต่ต้องใช้ JavaScript เพื่อสร้าง CSSStyleSheet object

แนวปฏิบัติที่ดี:

• ใช้ CSS variables เพื่อกำหนดค่าต่างๆ ที่ต้องการให้สามารถปรับเปลี่ยนได้
• ใช้ Constructible Stylesheets เพื่อ reuse styles ในหลาย Web Components
• ตรวจสอบให้แน่ใจว่า Tailwind classes ที่ใช้ใน Shadow DOM ถูก purge อย่างถูกต้อง

สรุป: การใช้ Tailwind CSS กับ Web Components ช่วยให้เราสร้าง components ที่สวยงาม reusable และ maintainable มากขึ้น การเข้าใจเรื่อง Shadow DOM และวิธีการ style Web Components เป็นสิ่งสำคัญเพื่อให้การทำงานร่วมกันเป็นไปอย่างราบรื่น