[影片教學] Nuxt 3 安裝與使用 Tailwind CSS

2023 iThome 鐵人賽

DAY 4

影片教學

Nuxt 3 快速入門系列第 4 篇

15th鐵人賽 nuxt 3 nuxt3 vue vue.js

Ryan

2023-09-19 20:37:12

953 瀏覽

分享至

👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。

設置 Tailwind CSS 環境

安裝 Nuxt Tailwind 模組

npm install -D @nuxtjs/tailwindcss

配置使用 Nuxt Tailwind 模組

修改專案目錄下 nuxt.config.ts 檔案

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss']
})

配置 Tailwind Coinfig 設定檔

專案目錄下建立 tailwind.config.js 檔案

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './components/**/*.{vue,js,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './composables/**/*.{js,ts}',
    './plugins/**/*.{js,ts}',
    './utils/**/*.{js,ts}',
    './{App,app}.{js,ts,vue}',
    './{Error,error}.{js,ts,vue}',
    './app.config.{js,ts}'
  ],
  theme: {
    extend: {}
  },
  plugins: []
}

使用 Tailwind CSS

編輯 app.vue 檔案

<template>
  <div class="bg-white py-24">
    <div class="flex flex-col items-center">
      <h1 class="text-6xl font-semibold text-blue-600">2023 iThome</h1>
      <p class="mt-4 text-9xl font-bold">鐵人賽</p>
    </div>
  </div>
</template>

VS Code 插件

Tailwind CSS IntelliSense 插件

設置 Prettier 環境

安裝 Tailwind x Prettier 插件

npm install -D prettier-plugin-tailwindcss

配置 Prettier 設定檔案

專案目錄下建立 .prettierrc.cjs 檔案

module.exports = {
  plugins: [
    'prettier-plugin-tailwindcss'
  ],
  printWidth: 100,          // 每行文字數量達 100 字元就換到新的一行
  semi: false,              // 每個語句的結尾不需要分號
  singleQuote: true,        // 字串使用單引號，而不是雙引號
  trailingComma: 'none'     // 如 Object、Array 內的元素不需要尾隨逗號
}