DEV Community

Juan Pablo Pérez lantes
Juan Pablo Pérez lantes

Posted on • Updated on

Configurar DaisyUI con Vue3

Con estos sencillos pasos tenemos configurado DeisyUI en nuestro proyecto VueJS con Vite

Crear proyecto

yarn create vite
Enter fullscreen mode Exit fullscreen mode

√ Project name: ... config-daisy-ui
√ Select a framework: » Vue
√ Select a variant: » JavaScript

Dependencias de desarrollo

yarn add -D \
@vue/compiler-sfc \
autoprefixer \
daisyui \
postcss \
tailwindcss
Enter fullscreen mode Exit fullscreen mode

Archivos de configuración

postcss.config.cjs

module.exports = {
  plugins: [require('tailwindcss'), require('autoprefixer')],
};
Enter fullscreen mode Exit fullscreen mode

tailwind.config.cjs

module.exports = {
  content: ['./src/**/*.{vue,js,ts}'],
  plugins: [require('daisyui')],
};
Enter fullscreen mode Exit fullscreen mode

src/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

src/style.css

@import './tailwind.css';
...
Enter fullscreen mode Exit fullscreen mode

Repositorio GIT

vue 3 + vite + DaisyUI

Top comments (0)