Tailwind v4 ออกแล้ว + บันทึกการ Migrate Tailwind + Astro

เมื่อ 2 สัปดาห์ก่อน Tailwind CSS v4.0 เพิ่งออกมา วันนี้เลยมาลองทำการเปลี่ยนจาก Tailwind v3 มาเป็น v4 ดูครับ เนื่องจากเว็บบล็อกนี้ใช้ Astro + Tailwind ตัวอย่าง และรายละเอียด ก็จะอ้างอิงถึง Astro

Tailwind CSS v4.0

We just released Tailwind CSS v4.0 — an all-new version of the framework optimized for performance and flexibility, with a reimagined configuration and customization experience, and taking full advantage of the latest advancements the web platform has to offer.tailwindcss.com

สิ่งที่เพิ่มมาใน Tailwind v4 ที่น่าสนใจ ก็เช่น

• container query : เป็น API ที่ทำให้เราสามารถจัดการขนาด container ได้ง่ายขึ้น
• gradient API : ทำ gradient ได้ง่าย และสะดวกขึ้น
• dynamic values : อันนี้ชอบมาก คือ เราสามารถปรับ spacing, grid หรืออะไรได้สะดวก โดยไม่ต้องอ้างอิงตามชื่อ class แล้ว เช่น grid-cols-16 , grid-cols-20
• ติดตั้งง่ายขึ้นมาก เพียงแค่ 3 ขั้นตอน ดังนี้

1. ติดตั้ง Tailwind CSS

npm install tailwindcss @tailwindcss/postcss

2. เพิ่ม plugins

1
export default {
2
  plugins: ['@tailwindcss/postcss']
3
}

3. ทำการ import CSS

1
@import 'tailwindcss';

• Automatic content detection: ไม่ต้องมากำหนด content ใน config file แล้ว ว่าจะให้ tailwind scan ไฟล์ไหนบ้าง ตัว tailwind จะ scan ไฟล์ให้เอง โดย ignore ตาม .gitignore
• ไฟล์ config ด้วย CSS - ก่อนหน้านี้เราจะใช้ไฟล์ tailwind.config.js แต่ว่า v4 เราจะ custom เป็น CSS ได้เลย ตัวอย่าง

1
@import 'tailwindcss';
2
@theme {
3
  --font-display: 'Satoshi', 'sans-serif';
4
  --breakpoint-3xl: 1920px;
5
  --color-avocado-100: oklch(0.99 0 0);
6
  --color-avocado-200: oklch(0.98 0.04 113.22);
7
  --color-avocado-300: oklch(0.94 0.11 115.03);
8
  --color-avocado-400: oklch(0.92 0.19 114.08);
9
  --color-avocado-500: oklch(0.84 0.18 117.33);
10
  --color-avocado-600: oklch(0.53 0.12 118.34);
11
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
12
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
13
  /* ... */
14
}

Upgrade Tailwind v4 Astro

ในโปรเจ็ค Astro ผมทำการ ติดตั้ง และอัพเกรดดังนี้ ตัว Astro ใช้ Tailwind ผ่าน Vite

npm i tailwindcss @tailwindcss/vite

ที่ไฟล์ astro.config.mjs ทำการ เพิ่ม plugins ไปแทนที่ tailwind ใน integration

1
import tailwindcss from '@tailwindcss/vite'
2
import tailwind from '@astrojs/tailwind'
3

4
export default defineConfig({
5
  vite: {
6
    plugins: [tailwindcss()]
7
  },
8
  integrations: [
9
    tailwind()
10
  ]
11
})

เปลี่ยนจาก การใช้ @tailwind เป็น @import

1
@tailwind base;
2
@tailwind components;
3
@tailwind utilities;
4

5
@import "tailwindcss";
6
@import "./theme.css";

มีบางไฟล์ .astro ที่ใช้ การกำหนด style แบบ scoped ก็เลยต้องอ้างอิง reference ให้มัน ไม่งั้น Tailwind จะไม่รู้จัก utility class นั้นๆ

1
<style scoped>
2
  @reference '../styles/custom.css';
3

4
  .link {
5
    @apply text-primary-600;
6
  }
7
</style>

Plugin typography

เนื่องจากเราได้ใช้ตัว plugin @typograhpy ด้วย เราก็สามารถ custom ผ่านไฟล์ global.css ของเราได้เลย

1
@import 'tailwindcss';
2
@plugin "@tailwindcss/typography";

แต่เนื่องจากว่า มีการปรับแต่ง เพิ่มเติมจาก tailwind.config.js ตัวอย่าง เช่น

1
import colors from 'tailwindcss/colors'
2

3
/** @type {import('tailwindcss').Config} */
4
export default {
5
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
6
  darkMode: 'class',
7
  theme: {
8
    extend: {
9
      colors: {
10
        primary: colors.blue,
11
        secondary: colors.rose,
12
        gray: colors.slate
13
      },
14
      typography: ({ theme }) => ({
15
        DEFAULT: {
16
          css: {
17
            ':not(pre) > code': {
18
              color: `${theme('colors.rose.600')}`,
19
              backgroundColor: `${theme('colors.gray.100')}`
20
            },
21
          }
22
        },
23
        invert: {
24
          css: {
25
            color: theme('colors.slate.200'),
26
            ':not(pre) > code': {
27
              color: `${theme('colors.pink.300')}`,
28
              backgroundColor: `${theme('colors.gray.800')}`
29
            },
30
            h1: {
31
              fontWeight: '600',
32
              letterSpacing: theme('letterSpacing.wide'),
33
              color: theme('colors.slate.100')
34
            }
35
        }
36
      })
37
    }
38
  },
39
  plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')]
40
}

เราก็เลยใช้วิธี import tailwind.config.js ไปไว้ใน css ไฟล์แบบนี้

1
@import 'tailwindcss';
2
@config "../../tailwind.config.js";

การปรับแต่ง theme

เราสามารถดู​ Default Theme ของ Tailwind v4 ได้ที่นี่ เราจะ custom โดยการตั้งชื่อไฟล์ใหม่ theme.css

1
@theme {
2
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
3
    'Courier New', monospace;
4

5
  --color-primary-500: blue;
6
}

จากนั้น ก็ import ไว้ที่ไฟล์ css หลักเรา

1
@import 'tailwindcss';
2
@import './theme.css';
3

4
@config "../../tailwind.config.mjs";

เบื้องต้น ตัวเว็บก็ทำการ migrate มา Tailwind v4 เรียบร้อยแล้ว ลองทดสอบ และใช้งานที่เคยเขียน พบว่า ไม่เจอโค๊ดที่มีปัญหาครับ และก็พร้อมที่จะเริ่มใช้งาน Tailwind v4 แล้ว และคิดว่าเร็วๆ นี้น่าจะได้ใช้พวก container query, dynamic values และก็ gradient APIs ครับ