Nuxt3-tailwindcss使用

忙着可爱呀~發表於2024-03-06
UXAICSS

Nuxt3使用 tailwindcss

文件：https://www.tailwindcss.cn/docs/installation

安裝文件：https://tailwindcss.nuxtjs.org/getting-started/installation

1、安裝 @nuxtjs/tailwindcss

yarn add -D @nuxtjs/tailwindcss

2、nuxt.config.ts中配置

export default defineNuxtConfig({
  devtools: { enabled: false },
  typescript: {
    shim: false
  },
  modules: [
    '@pinia/nuxt',
    '@pinia-plugin-persistedstate/nuxt',
    '@nuxtjs/tailwindcss' // 新增此處
  ],
})

3、以上兩步即可使用 tailwindcss

以下為自定義使用 tailwindcss 的配置：

1、生成 tailwind.config.js 檔案

npx tailwindcss init

2、配置 tailwind.config.js 檔案

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3、建立 tailwind.css ，~/assets/css/tailwind.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

4、配置 nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: false },
  typescript: {
    shim: false
  },
  modules: [
    '@pinia/nuxt',
    '@pinia-plugin-persistedstate/nuxt',
    '@nuxtjs/tailwindcss' // 此處
  ],
  css: ['~/assets/styles/tailwind.css'], // 新增此處
  pinia: {
    autoImports: [
      'defineStore' // import { defineStore } from 'pinia'
    ]
  },
})

相關文章