ใช้ Emotion, Twin และ Tailwind บน Next.js ฉบับมือใหม่สุดๆ

เนื่องจากเจ้าของบล็อกได้มีโอกาสขึ้นโปรเจกต์ด้วย Next.js ครั้งแรก เลยอยากจะลองอะไรใหม่ ๆ มากเพิ่มขึ้นอีก เลยไปขอคำแนะนำจากเพื่อน ๆ ในทีม ก็ได้รับคำแนะนำให้ใช้ Tailwind CSS สำหรับการ Styling ซึ่งเพื่อนได้เขียนลงบล็อกให้อ่านไว้ด้วย ตามลิงก์ด้านล่างนี้เลยยยย 👇🏼

มาลองใช้ Tailwind CSS กับ React กัน

ซึ่งก่อนหน้านี้เจ้าของบล็อกจะติดการใช้ CSS-in-JS library อย่าง Styled-Components และตัว Design ของโปรเจกต์จะนำ Components จาก Material-UI มาเป็น base ในการออกแบบ ซึ่งเวลา Custom จะง่ายเมื่อใช้ CSS-in-JS library ทำให้เจ้าของบล็อกอยากลองดูว่าถ้านำ Tailwind มาใช้ร่วมกับพวก CSS-in-JS library จะเป็นอย่างไร โดยครั้งนี้เราจะลองเปลี่ยน library ที่ใช้เป็น Emotion ดู (แต่จริงๆแล้วก็ยังไม่ค่อยเห็นความต่างจาก Styled-Components เท่าไหร่นะคะ 😅)

ในที่นี้เราจะใช้ Twin เพื่อให้ Tailwind ใช้กับพวก CSS-in-JS library ได้นั่นเอง ซึ่งหลักการทำงานของมันคือเมื่อ Babel รันโค้ดของเราแล้ว ค่าที่ import มาของ Twin เช่น css, styled จะไปสลับไป import จากพวก CSS-in-JS library ให้เรา

มาเริ่มกันเลยยยย 🚗

1. สร้างโปรเจกต์ขึ้นมา

npx create-next-app try-emotion-twin

2. ติดตั้ง dependencies ทั้งหมด

npm install --save twin.macro @emotion/core @emotion/styled @emotion/babel-preset-css-prop

3. สร้างไฟล์ .babelrc แล้วใส่ตามด้านล่างนี้เพื่อ enable ตัว babel macros และ css props

{
  "presets": [
    "next/babel",
    "@emotion/babel-preset-css-prop"
  ],
  "plugins": [
    "babel-plugin-macros"
  ]
}

4. Import ตัว Tailwind base styles ใน pages/_app.js

import React from 'react'
import 'tailwindcss/dist/base.min.css'

const App = ({ Component, pageProps }) => <Component {...pageProps} />

export default App

5. เพิ่ม Config ลงไป โดยเลือกทำได้ 2 วิธี

a.) เพิ่มลงใน package.json

"babelMacros": {
    "twin": {
      "config": "tailwind.config.js",
      "preset": "emotion",
      "debugProp": true,
      "debugPlugins": false,
      "debug": false,
    }
},

b.) สร้างไฟล์ชื่อ babel-plugin-macros.config.js ใน root แล้วใส่ตามด้านล่าง

module.exports = {
  twin: {
    config: 'tailwind.config.js',
    preset: 'emotion',
    debugProp: true,
    debugPlugins: false,
    debug: false,
  },
}

6. สร้างไฟล์ Tailwind config

เลือกทำได้ 2 แบบเลย

a.) สร้างไฟล์ config เปล่า ๆ ชื่อ tailwind.config.js ที่ root (เจ้าของบล็อกใช้วิธีนี้)

module.exports = {
  theme: {
    extend: {
      colors: {},
    },
  },
  plugins: [],
}

b.) ติดตั้ง full config

curl https://raw.githubusercontent.com/tailwindcss/tailwindcss/master/stubs/defaultConfig.stub.js > tailwind.config.js

มาลองเล่นดูว่าทำท่าไหนได้บ้างนะ 🤔

a.) อันนี้จะเห็นว่าสามารถใช้ค่า css และ theme จาก Emotion มาใช้รวมกับ Tailwind ได้แบบนี้

โดยชื่อสี aqua และ waterblue มาจากที่เราไปเพิ่มใน config file แบบนี้ (ซึ่งตรงนี้เราจะสามารถเพิ่ม config พวก size, screen size และอื่นๆได้ที่นี่เลย)

b.) อันนี้จะเห็นว่ามีการนำ button มา Styling โดยสร้างเป็นตัวแปรชื่อ Button ละนำมาใช้เป็นแท็กได้แบบเดียวกับปกติที่เราใช้ CSS-in-JS library เป็นหลักเลย และมีการส่ง props เข้าไปอย่าง isPrimary ,isSecondary และ isSmall เพื่อสร้างเงื่อนไข แต่ก็ยังนำค่าจาก Tailwind มาใช้รวมได้อยู่

สรุปสักนิด 😅

จากการลองใช้รวมกันทำให้เจ้าของบล็อกพบว่าในบางกรณีพวก CSS-in-JS libraries จะสามารถช่วยให้โค้ด inline css ยาว ๆ ของ Tailwind สั้นลงได้ หรือกรณีที่เราอยากเห็นเป็น tag ของแต่ละ Component ไปเลยเพื่อให้ง่ายต่อการดูโค้ด แต่ในด้านการใช้งานจริง ๆ แล้วอาจไม่จำเป็นต้องใช้พวก CSS-in-JS libraries ก็ได้ เพราะ Tailwind เองก็สามารถทำ Styling ได้มากพอแล้วค่ะ เว้นแต่ถ้าอยาก Custom พวก Material UI เราอาจจะต้องใช้พวก CSS-in-JS libraries เข้ามาช่วยตรงนี้

อย่าลืม 👏 (Claps) และ 🔖 (Bookmark) บทความนี้ไว้อ่านทีหลังด้วยนะ

Reference 📚

ben-rogerson/twin.macro

How to Style Your React Apps with Less Code Using Tailwind CSS, Styled Components, and Twin Macro