listVue Firebase Masterclass

การ customize tailwind

สารบัญ

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

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

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

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

javascript

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

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

html

<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 เป็น

html

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

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

css

/* 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 ใหม่เป็น

html

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

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

@layer base
@layer components
@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 ตัวนี้ได้

css

@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 ด้วยนะ)

css

@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 แทนได้

css

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

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

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

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

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

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

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

arrow_backก่อนหน้าพาเล่น tailwind กัน ถัดไปรู้จักกับ Daisy UIarrow_forward