การใช้งานกับ PostCSS Plugins อื่นๆ

การใช้งาน Tailwind CSS กับ PostCSS Plugins อื่นๆ

Tailwind CSS นั้นทรงพลังด้วยตัวมันเอง แต่ความสามารถของมันจะเพิ่มขึ้นอีกมากเมื่อใช้ร่วมกับ PostCSS plugins อื่นๆ PostCSS เป็นเครื่องมือที่ช่วยแปลง CSS ด้วย JavaScript ทำให้เราสามารถใช้ plugins ต่างๆ เพื่อปรับแต่ง, เพิ่มประสิทธิภาพ, และตรวจสอบโค้ด CSS ของเราได้ ในบทความนี้ เราจะมาดู plugins ที่นิยมใช้กัน 3 ตัว ได้แก่ Autoprefixer, CSSNano, และ Stylelint พร้อมทั้งวิธีการใช้งานกับ Tailwind CSS

PostCSS คืออะไร?

PostCSS คือเครื่องมือที่แปลง CSS ด้วย JavaScript มันรับ CSS เป็น input, ประมวลผลมันผ่าน plugins ต่างๆ, และส่งออก CSS ที่ถูกแปลงแล้ว PostCSS เองไม่ได้ทำอะไรมากนัก แต่ความสามารถของมันอยู่ที่ plugins ที่เราเลือกใช้

ทำไมต้องใช้ PostCSS Plugins กับ Tailwind CSS?

การใช้ PostCSS plugins กับ Tailwind CSS ช่วยให้เรา:

• ปรับปรุงความเข้ากันได้: Autoprefixer ช่วยเพิ่ม prefixes ให้กับ CSS เพื่อให้รองรับ browsers รุ่นเก่าๆ ได้
• ลดขนาดไฟล์: CSSNano ช่วยบีบอัด CSS เพื่อให้ไฟล์มีขนาดเล็กลงและโหลดเร็วขึ้น
• รักษาคุณภาพโค้ด: Stylelint ช่วยตรวจสอบโค้ด CSS ให้เป็นไปตามมาตรฐานและรูปแบบที่เรากำหนด

การติดตั้ง PostCSS Plugins

ในการใช้งาน PostCSS plugins เราต้องติดตั้งมันผ่าน npm หรือ yarn ก่อน ตัวอย่างเช่น:

npm install -D autoprefixer cssnano stylelint

หรือ

yarn add -D autoprefixer cssnano stylelint

การตั้งค่า PostCSS Configuration

Tailwind CSS ใช้งาน PostCSS อยู่แล้ว ดังนั้นเราเพียงแค่ต้องเพิ่ม plugins ที่เราต้องการเข้าไปในไฟล์ postcss.config.js (หรือ postcss.config.cjs สำหรับ CommonJS) ซึ่งโดยปกติจะอยู่ใน root directory ของโปรเจกต์

ถ้ายังไม่มีไฟล์ postcss.config.js ให้สร้างขึ้นมา และใส่โค้ดต่อไปนี้:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    cssnano: {
      preset: 'default',
    },
    stylelint: {
      /* เพิ่มเติมการตั้งค่า Stylelint ได้ที่นี่ */
    },
  },
}

คำอธิบาย:

• tailwindcss: {}: เป็นการบอกให้ PostCSS ใช้ Tailwind CSS
• autoprefixer: {}: เป็นการบอกให้ PostCSS ใช้ Autoprefixer
• cssnano: { preset: 'default' }: เป็นการบอกให้ PostCSS ใช้ CSSNano โดยใช้ preset 'default' ซึ่งจะทำการบีบอัด CSS ในระดับพื้นฐาน
• stylelint: { /* ... */ }: เป็นการบอกให้ PostCSS ใช้ Stylelint เราจะอธิบายรายละเอียดการตั้งค่า Stylelint ในภายหลัง

ข้อควรจำ: ลำดับของ plugins มีความสำคัญ โดยทั่วไปแล้ว Tailwind CSS ควรอยู่ก่อน Autoprefixer และ CSSNano ควรอยู่หลัง Autoprefixer เพื่อให้แน่ใจว่า CSS ที่ถูกปรับแต่งโดย Tailwind CSS และ Autoprefixer จะถูกบีบอัดอย่างถูกต้อง

1. Autoprefixer

Autoprefixer เป็น PostCSS plugin ที่เพิ่ม prefixes ให้กับ CSS properties โดยอัตโนมัติ เพื่อให้รองรับ browsers รุ่นเก่าๆ ได้ ตัวอย่างเช่น เมื่อเราใช้ CSS property display: flex Autoprefixer จะเพิ่ม prefixes เช่น -webkit-flex และ -ms-flexbox ให้โดยอัตโนมัติ

การตั้งค่า: โดยทั่วไปแล้ว Autoprefixer จะทำงานได้ทันทีหลังจากติดตั้งและเพิ่มเข้าไปใน postcss.config.js โดยไม่ต้องมีการตั้งค่าเพิ่มเติม

ตัวอย่าง:

/* CSS ก่อน Autoprefixer */
.flex-container {
  display: flex;
}

/* CSS หลัง Autoprefixer */
.flex-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

Autoprefixer จะอ่านค่าจากไฟล์ .browserslistrc (หรือจาก browserslist ใน package.json) เพื่อกำหนด browsers ที่ต้องการรองรับ ถ้าไม่มีไฟล์เหล่านี้ Autoprefixer จะใช้ค่า default ซึ่งอาจจะไม่ตรงกับความต้องการของเรา

ตัวอย่างไฟล์ .browserslistrc:

> 0.5%
last 2 versions
not dead

ไฟล์นี้บอกว่าให้รองรับ browsers ที่มี market share มากกว่า 0.5%, 2 versions ล่าสุดของแต่ละ browser, และ browsers ที่ยังไม่ตาย (ได้รับการ update อยู่)

2. CSSNano

CSSNano เป็น PostCSS plugin ที่บีบอัด CSS เพื่อลดขนาดไฟล์ มันจะลบ whitespace, comments, และทำการ optimization อื่นๆ ตัวอย่างเช่น font-weight: bold จะถูกแปลงเป็น font-weight:700

การตั้งค่า: เราได้เพิ่ม CSSNano เข้าไปใน postcss.config.js แล้ว โดยใช้ preset 'default' ซึ่งเป็นการตั้งค่าที่แนะนำสำหรับการใช้งานทั่วไป

ตัวอย่าง:

/* CSS ก่อน CSSNano */
.my-class {
  font-size: 16px;
  font-weight: bold; /* This is a comment */
  margin: 10px;
}

/* CSS หลัง CSSNano */
.my-class{font-size:16px;font-weight:700;margin:10px}

CSSNano มี presets หลายระดับให้เลือกใช้ แต่ 'default' เป็นตัวเลือกที่เหมาะสมที่สุดสำหรับ Tailwind CSS เพราะมันจะทำการบีบอัดในระดับที่ปลอดภัย โดยไม่ทำให้เกิดปัญหาในการแสดงผล

3. Stylelint

Stylelint เป็นเครื่องมือ Linting สำหรับ CSS มันช่วยตรวจสอบโค้ด CSS ให้เป็นไปตามมาตรฐานและรูปแบบที่เรากำหนด ทำให้โค้ดมีความสม่ำเสมอและอ่านง่ายขึ้น

การตั้งค่า: Stylelint ต้องมีการตั้งค่าเพิ่มเติม เพื่อกำหนด rules ที่ต้องการตรวจสอบ

ขั้นแรก สร้างไฟล์ .stylelintrc.json ใน root directory ของโปรเจกต์

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-tailwindcss",
    "stylelint-config-prettier"
  ],
  "plugins": [
    "stylelint-order"
  ],
  "rules": {
    "order/properties-alphabetical-order": true,
    "selector-class-pattern": null
  }
}

คำอธิบาย:

• "extends": [...]: เป็นการบอกให้ Stylelint ใช้ configuration ที่กำหนดไว้แล้ว Configuration ที่เราใช้คือ:
  • stylelint-config-standard: เป็น configuration มาตรฐานของ Stylelint
  • stylelint-config-tailwindcss: เป็น configuration ที่ปรับแต่งมาสำหรับ Tailwind CSS
  • stylelint-config-prettier: เป็น configuration ที่ช่วยให้ Stylelint ทำงานร่วมกับ Prettier ได้อย่างราบรื่น
• "plugins": [...]: เป็นการบอกให้ Stylelint ใช้ plugins เพิ่มเติม Plugin ที่เราใช้คือ stylelint-order ซึ่งช่วยให้เราจัดเรียง CSS properties ตามลำดับที่เราต้องการ
• "rules": [...]: เป็นการกำหนด rules ที่เราต้องการใช้ Rules ที่เรากำหนดคือ:
  • "order/properties-alphabetical-order": true: เป็นการบอกให้ Stylelint ตรวจสอบว่า CSS properties ถูกจัดเรียงตามตัวอักษร
  • "selector-class-pattern": null: เป็นการปิดการตรวจสอบ class names เพราะ Tailwind CSS ใช้ class names ที่ไม่ได้เป็นไปตามรูปแบบปกติ

จากนั้น ติดตั้ง dependencies ที่จำเป็น:

npm install -D stylelint-config-standard stylelint-config-tailwindcss stylelint-config-prettier stylelint-order

หรือ

yarn add -D stylelint-config-standard stylelint-config-tailwindcss stylelint-config-prettier stylelint-order

สุดท้าย เพิ่ม script ใน package.json เพื่อเรียกใช้ Stylelint:

{
  "scripts": {
    "lint:css": "stylelint './src/**/*.{css,scss,sass,pcss,postcss}'"
  }
}

เราสามารถรัน Stylelint ได้โดยใช้คำสั่ง:

npm run lint:css

หรือ

yarn lint:css

Stylelint จะตรวจสอบโค้ด CSS ของเรา และแสดงข้อผิดพลาดที่พบ

สรุป

การใช้ PostCSS plugins ร่วมกับ Tailwind CSS ช่วยให้เราปรับปรุง, เพิ่มประสิทธิภาพ, และรักษาคุณภาพโค้ด CSS ของเราได้ Autoprefixer ช่วยให้รองรับ browsers รุ่นเก่าๆ, CSSNano ช่วยลดขนาดไฟล์, และ Stylelint ช่วยตรวจสอบโค้ดให้เป็นไปตามมาตรฐาน การตั้งค่า plugins เหล่านี้อาจจะยุ่งยากเล็กน้อย แต่ผลลัพธ์ที่ได้คุ้มค่าแน่นอน