Nuxt3-tailwindcss使用

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'
    ]
  },
})