Nuxt (4) 引入 tailwind css

發表於 分類於
引入 tailwind css

載入 tailwind css

先到 tailwind nuxt 網站，用 npm 安裝 tailwind

1
npm install --save-dev @nuxtjs/tailwindcss

然後在 nuxt.config.{ts,js} 中引入

1
2
3
export default defineNuxtConfig({
  modules: ["@nuxtjs/tailwindcss"],
});

加入設定檔

在根目錄增加 assets 資料夾，裏頭增加 tailwind.css 檔

1
2
3
- assets
  - css
    - tailwind.css

在 tailwind.css 即可設定客製樣式

1
2
3
4
5
6
7
8
9
10
11
12
13
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  @apply bg-gray-50;
}

@layer components {
  .btn {
    @apply bg-[#12b488] text-white px-3 py-2 rounded-md text-sm;
  }
}