Nuxt3 e DaisyUi

Torne seu desenvolvimento tailwind CSS mais rápido, limpo e fácil.

DaisyUI é o plugin Tailwind CSS, você pode usar em diversos Frameworks.
Ele fornece nomes de classe de componente úteis, ajuda a escrever menos código e construir componentes de forma mais rápido, usa um design sofisticado e atual.

Nos exemplos abaixo irei usar o gerenciador de pacotes npm.

1º Etapa - Instalação do Nuxt3.

Para esse exemplo iremos usar o Nuxt3

npm create nuxt project-daisyui

2º Etapa - Adicione o TailwindCss.

Vá para dentro do projeto e adicione esse comando no seu terminal:

npm install --save-dev @nuxtjs/tailwindcss

Depois vá a modules no arquivo nuxt.config.{ts,js}

export default defineNuxtConfig({
  css: ['~/assets/main.css'],
  modules: [
    '@nuxtjs/tailwindcss'
  ]
}

Depois crie o arquivo main.css e adicione:

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

Documentação: https://nuxt.com/modules/tailwindcss

3º Etapa - Adicione o Daisyui.

npm i -D daisyui@latest

Adicione o arquivo tailwind.config.{ts,js}, depois coloque o plugin daisyui:

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [
    require('daisyui'),
  ],
  daisyui: {
    themes: true,
    darkTheme: "dark",
    base: true,
    styled: true, 
    utils: true, 
    prefix: "",
    logs: true,
    themeRoot: ":root",
  },
}

Caso você utilize o nuxt3 com vite, ele irá mudar um pouco a forma de instalação do plugin, em baixo vou deixar a documentação para instalação:

Documentação: https://daisyui.com/docs/install/nuxt/

Fiz um exemplos pratico do nuxt3 e daisyui, aqui está o link do meu repositório do github:

https://github.com/Helton-Carlos/nuxt-and-daisyui

Se quiser já ir testando, já pode colar em seu terminal:

git clone https://github.com/Helton-Carlos/nuxt-and-daisyui.git

npm i 

npm run dev