การปรับแต่ง Configuration File ของ Tailwind CSS

Tailwind CSS เป็น framework ที่มีความยืดหยุ่นสูง ทำให้เราสามารถปรับแต่งค่าต่างๆ ได้มากมายผ่านไฟล์ tailwind.config.js ไฟล์นี้เป็นหัวใจสำคัญในการกำหนดลักษณะของ design system ของเรา ไม่ว่าจะเป็นสี, fonts, breakpoints, spacing หรือค่าอื่นๆ ที่ Tailwind CSS ใช้ในการสร้าง styles

ในบทนี้ เราจะมาเจาะลึกถึงวิธีการปรับแต่ง tailwind.config.js เพื่อให้ Tailwind CSS ทำงานได้ตรงตามความต้องการของเรามากที่สุด โดยจะเน้นไปที่การกำหนด theme, การเพิ่ม fonts และการตั้งค่า breakpoints ซึ่งเป็นพื้นฐานสำคัญในการสร้าง design system ที่สอดคล้องกับ brand ของเรา

ทำความเข้าใจ tailwind.config.js

เมื่อเราติดตั้ง Tailwind CSS ในโปรเจกต์ของเรา ไฟล์ tailwind.config.js จะถูกสร้างขึ้นโดยอัตโนมัติ ถ้ายังไม่มี สามารถสร้างได้โดยใช้คำสั่ง:

npx tailwindcss init

ไฟล์นี้จะมีโครงสร้างพื้นฐานประมาณนี้:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./public/index.html",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

ส่วนประกอบหลักของไฟล์นี้คือ:

content: ระบุไฟล์ที่จะถูกสแกนหา Tailwind CSS class names
theme: กำหนดค่าเริ่มต้นของ design system (สี, fonts, breakpoints, spacing, etc.)
plugins: เพิ่มเติม functionality ให้กับ Tailwind CSS ผ่าน plugins

การกำหนด Theme

ส่วน theme เป็นส่วนที่เราจะใช้ปรับแต่งค่าต่างๆ ของ design system ของเรา Tailwind CSS มี default theme ที่ครอบคลุมค่าพื้นฐานที่จำเป็น แต่เราสามารถ override หรือ extend ค่าเหล่านี้ได้ตามต้องการ

มีสองวิธีหลักในการปรับแต่ง theme:

Override: แทนที่ค่าเริ่มต้นของ Tailwind CSS ด้วยค่าที่เรากำหนดเอง
Extend: เพิ่มค่าใหม่เข้าไปใน theme โดยยังคงค่าเริ่มต้นของ Tailwind CSS ไว้

การ Override ค่าเริ่มต้น

หากต้องการแทนที่ค่าเริ่มต้นของ Tailwind CSS ให้กำหนดค่าใหม่โดยตรงในส่วน theme เช่น หากต้องการเปลี่ยนสี primary ให้เป็นสีส้ม:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./public/index.html",
  ],
  theme: {
    colors: {
      'primary': '#ff7849',
      'secondary': '#3490dc',
      'gray': '#efefef',
    },
  },
  plugins: [],
}

จากตัวอย่างนี้ เราได้ override ค่าสีเริ่มต้นของ Tailwind CSS และกำหนดสีใหม่ 3 สี: primary, secondary และ gray เราสามารถใช้สีเหล่านี้ใน HTML ได้ดังนี้:

<button class="bg-primary text-white px-4 py-2 rounded">Primary Button</button>

การ Extend ค่าเริ่มต้น

หากต้องการเพิ่มค่าใหม่โดยไม่แทนที่ค่าเริ่มต้น ให้ใช้ส่วน theme.extend เช่น หากต้องการเพิ่มขนาด font ใหม่:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./public/index.html",
  ],
  theme: {
    extend: {
      fontSize: {
        'xxs': '.625rem',
        '10xl': '9rem',
      }
    },
  },
  plugins: [],
}

จากตัวอย่างนี้ เราได้เพิ่มขนาด font ใหม่สองขนาด: xxs และ 10xl เราสามารถใช้ขนาดเหล่านี้ใน HTML ได้ดังนี้:

<p class="text-xxs">Extra Extra Small Text</p>
<h1 class="text-10xl">Giant Heading</h1>

การเพิ่ม Fonts

Tailwind CSS มาพร้อมกับ font stack พื้นฐาน แต่เราสามารถเพิ่ม fonts ที่เราต้องการใช้ในโปรเจกต์ของเราได้ โดยการกำหนดค่าในส่วน theme.fontFamily

ก่อนอื่น เราต้อง import fonts ที่เราต้องการใช้ใน CSS ของเราก่อน (เช่น ผ่าน @import ในไฟล์ CSS หลักของเรา หรือผ่าน link tag ใน HTML)

จากนั้น เราสามารถกำหนด font family ใน tailwind.config.js ได้ดังนี้:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./public/index.html",
  ],
  theme: {
    extend: {
      fontFamily: {
        'sans': ['"Inter var"', ...defaultTheme.fontFamily.sans],
        'mono': ['"Roboto Mono"', ...defaultTheme.fontFamily.mono],
      },
    },
  },
  plugins: [],
}

ในตัวอย่างนี้ เราได้เพิ่ม font family ใหม่สองแบบ: sans (ใช้ font "Inter var") และ mono (ใช้ font "Roboto Mono") เราใช้ spread operator (...) เพื่อรวม font stacks เริ่มต้นของ Tailwind CSS เข้าไปด้วย เพื่อให้ browser สามารถ fallback ไปใช้ font อื่นได้หาก font ที่เรากำหนดไว้ไม่พร้อมใช้งาน

สำคัญ: อย่าลืม `require('tailwindcss/defaultTheme')` เพื่อเข้าถึงค่าเริ่มต้นของ Tailwind CSS:

const defaultTheme = require('tailwindcss/defaultTheme')

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./public/index.html",
  ],
  theme: {
    extend: {
      fontFamily: {
        'sans': ['"Inter var"', ...defaultTheme.fontFamily.sans],
        'mono': ['"Roboto Mono"', ...defaultTheme.fontFamily.mono],
      },
    },
  },
  plugins: [],
}

เราสามารถใช้ font family เหล่านี้ใน HTML ได้ดังนี้:

<p class="font-sans">This text uses the Inter var font.</p>
<code class="font-mono">This code uses the Roboto Mono font.</code>

การตั้งค่า Breakpoints

Tailwind CSS มี breakpoints เริ่มต้นที่ครอบคลุมการใช้งานทั่วไป แต่เราสามารถปรับแต่ง breakpoints เหล่านี้ให้เหมาะกับความต้องการของโปรเจกต์ของเราได้ โดยการกำหนดค่าในส่วน theme.screens

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./public/index.html",
  ],
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
      'tablet': '640px',
      'laptop': '1024px',
      'desktop': '1280px',
    },
  },
  plugins: [],
}

ในตัวอย่างนี้ เราได้ override breakpoints เริ่มต้นของ Tailwind CSS และกำหนด breakpoints ใหม่ 3 แบบ: tablet, laptop และ desktop เราสามารถใช้ breakpoints เหล่านี้ใน HTML ได้ดังนี้:

<div class="w-full tablet:w-1/2 laptop:w-1/3 desktop:w-1/4">
  <!-- Content here -->
</div>

โค้ดนี้จะทำให้ div มีความกว้าง 100% บนหน้าจอขนาดเล็ก, 50% บนหน้าจอขนาด tablet, 33.33% บนหน้าจอขนาด laptop และ 25% บนหน้าจอขนาด desktop

สรุป

การปรับแต่ง tailwind.config.js เป็นขั้นตอนสำคัญในการสร้าง design system ที่สอดคล้องกับความต้องการของโปรเจกต์ของเรา การกำหนด theme, การเพิ่ม fonts และการตั้งค่า breakpoints เป็นเพียงส่วนหนึ่งของการปรับแต่งทั้งหมด Tailwind CSS มี options ให้เราปรับแต่งอีกมากมาย ซึ่งเราจะได้เรียนรู้ในบทต่อๆ ไป

ในบทต่อไป เราจะเรียนรู้เกี่ยวกับการใช้งาน Variants อย่างละเอียด ซึ่งเป็นอีกหนึ่ง feature ที่ทรงพลังของ Tailwind CSS ที่ช่วยให้เราสามารถสร้าง styles ที่แตกต่างกันตาม state ของ element (เช่น :hover, :focus, :active) หรือตาม media query