Configurar Tailwind CSS en un proyecto con Oruga UI, Vue 3 y Laravel con Mix

Oruga UI es un framework basado en componentes; la gente de Oruga se ha esforzado para que sus componentes no tengan un estilo asociado, si no, que podamos tener un estilo personalizado usando sus componentes.

Vamos a conocer como podemos configurar un proyecto en Vue 3 con Tailwind.css, por supuesto, el proyecto en Vue en cuestión, es generado desde Laravel; para esto, vamos a modificar el webpack.mix para agregar las dependencias de tailwind:

webpack.mix.js

mix
.js('resources/js/app.js', 'public/js')
.js('resources/js/vue/main.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
])
.postCss('resources/css/vue.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
]);

Creamos un nuevo archivo indicando los componentes de Tailwind CSS:

resources\css\vue.css

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

Y con esto, ya podemos usar Tailwind en cualquier archivo .vue; por ejemplo:

Modificas tu plantilla de Vue:

resources\views\vue.blade.php

//***
    <title>Vue</title>
    <link rel="stylesheet" href="{{ asset('css/vue.css') }}">
//***