安裝所需套件:

npm install --save-dev tailwindcss postcss autoprefixer
npx tailwindcss init --postcss

編輯 tailwind.config.js 檔案內容如下:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,jsx,tsx}',
    './components/**/*.{js,jsx,tsx}',
  theme: {
    extend: {},
  },
  plugins: [],
}

編輯 app/globals.css 檔案內容如下:

@tailwind base;
@tailwind components;
@tailwind utilities;

執行結果:

如果做完設定後，網頁的樣式被清除一空，表示Tailwind CSS 已經被正確引入

大叔的鐵人賽第七天結束 :)