การ customize tailwind

การเพิ่ม Custom style ลงไป

Document ต้นฉบับ https://tailwindcss.com/docs/adding-custom-styles

แม้ว่า tailwind เองจะมีการ strict style เอาไว้ก็จริง แต่จริงๆมันสามารถกำหนด style เองได้เช่นกัน

ตัวอย่าง ลองเพิ่ม spacing ที่ file tailwind.config.js

// tailwind.config.js
module.exports = {
  extend: {
    spacing: {
      '72': '18rem',
      '84': '21rem',
      '96': '24rem',
    },
    colors: {
      teal: {
        100: '#E6FFFA',
        200: '#B2F5EA',
      },
      midnight: '#2c3e50'
    }
  }
}

หลังจากนี้เราก็จะสามารถเรียกใช้ class แบบนี้ได้

<div class="mt-72 pb-84">
  Test box
</div>
<div class="bg-teal-100">This is a teal background.</div>
<p class="text-midnight">This is midnight colored text.</p>

การ grouping class (Directive)

Document ต้นฉบับ https://tailwindcss.com/docs/functions-and-directives

ตัวอย่างการทำ grouping class กัน สมมุติ code เป็น

<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Click me!</button>

ที่ css file เราสร้าง เราสามารถรวมคำสั่งใหม่ทั้งหมด รวมด้วยคำสั่ง @apply (เรียกสิ่งนี้ว่า Directive)

/* styles.css or your CSS file */
.btn-blue {
  @apply bg-blue-500 text-white px-4 py-2 rounded;
}

.btn-blue:hover {
  @apply bg-blue-600;
}

เรียก class ใหม่เป็น

<button class="btn-blue">Click me!</button>

จริงๆมันสามารถแทรกใน layer ต่างๆของ tailwind ได้เช่นกัน โดย tailwind จะแบ่ง CSS ออกเป็น 3 layer ใหญ่ๆ (สังเกตได้จากตอนที่ import คือ)

1. @layer base
2. @layer components
3. @layer utilities

ซึ่งมีจุดประสงค์และการใช้งานที่แตกต่างกัน

1. @layer base

ที่ layer base มีเป้าหมายในการ render base element style โดย style ที่เกี่ยวข้องกับส่วนนี้จะเป็นจุดเริ่มต้นของการ generate stylesheet ของ tailwind

หากต้องการ override (เขียนทับ) style ตัวไหนของ base ก็แนะนำให้เขียนผ่าน Directive ของ @layer base ได้

เช่น เคสนี้ต้องการเปลี่ยน default style ของ <h1>, <p> ก็จะสามารถทำผ่าน Directive ตัวนี้ได้

@layer base {
  h1 {
    font-size: 2rem;
  }
  p {
    margin-bottom: 1rem;
  }
}

2. @layer components

ที่ layer นี้คือ component-level style จะเป็น style ที่ทำหลังจาก set base style แล้วเรียบร้อย

โจทย์ของ layer นี้คือการสร้าง utility class ที่สามารถนำมา reuse ได้ (reusable component) เช่น cards, modal (pop-up style), buttons

ซึ่ง layer นี้เหมาะกับการรวมของกลายๆอย่างเข้าด้วยกันและสร้างออกมาเป็น utility class เป็นกลุ่มเดียวกันก็ได้

เช่น เคสนี้ ที่เราจะทำการรวม

• ปุ่มสีน้ำเงิน (bg-blue-500)
• ตัวอักษรสีขาว (text-white)
• padding แกน x 4px, แกน y 2px
• และขอบ border ทั้งหมดเป็นขอบมน

ก็จะทำการรวม class เหล่านี้ออกมาเป็น class ใหม่คือ .btn ออกมาได้ (แน่นอน class ที่เรียกใช้ได้ ก็ต้องเป็น class ที่มาจาก base style ด้วยนะ)

@layer components {
  .btn {
    @apply bg-blue-500 text-white px-4 py-2 rounded;
  }
}

3 @layer utilities

ที่ layer นี้คือการทำ custom utility classes. ถูกสร้างมาเป็นลำดับสุดท้าย และสร้างไว้เพื่อใช้ในจุดประสงค์พิเศษอื่นๆ ที่ไม่เกี่ยวกับการ reuse component แต่อาจจะเกี่ยวกับบางจุดที่จำเป็นต้องการแต่งของระบบเรา

เช่น ตัวอย่างนี้คือ เราจะสร้าง class สำหรับการหมุน 10deg ออกมาก็จะสร้าง class ใหม่ออกมาเป็น .rotate-10 โดยทำการหมุน 10deg แทนได้

@layer utilities {
  .rotate-10 {
    transform: rotate(10deg);
  }
}

เพราะฉะนั้น การ grouping utility class นั้นก็ต้อง design class ออกมาให้ถูกต้องเช่นกัน

จะใช้หรือไม่ใช้ layer ก็ได้ แต่การใช้ก็จะสามารถกันสับสนได้ว่า class ที่เราสร้างมา สร้างมาเพื่อจุดประสงค์อะไรบ้าง และควร render ก่อนหรือหลัง สามารถใช้สำหรับจัดลำดับได้

อื่นๆเพิ่มเติม

เนื้อหาที่ผมจะไม่ได้ลงในนี้ (ไว้มีโอกาสจะมาแวะเล่าเพิ่มเติม)

• การทำ Dark Mode
• Optimize สำหรับการ Production
• Browser support

ทุกคนสามารถอ่านเพิ่มเติมได้ที่ https://tailwindcss.com/