Configurar Tailwind CSS en un proyecto con Oruga UI, Vue 3 y Laravel con Mix
Con Oruga UI, podemos usar frameworks CSS u estilos personalizados para los componentes de Oruga UI.
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') }}">
//***- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter