Configure Tailwind CSS in a project with Oruga UI, Vue 3 and Laravel with Mix

- Andrés Cruz

En español
Configure Tailwind CSS in a project with Oruga UI, Vue 3 and Laravel with Mix

Oruga UI is a component-based framework; the tem Oruga have made an effort so that their components do not have an associated style, but instead, we can have a custom style using their components.

We are going to know how we can configure a project in Vue 3 with Tailwind.css, of course, the Vue project in question is generated from Laravel; for this, we are going to modify the webpack.mix to add the tailwind dependencies:

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

We create a new file indicating the Tailwind CSS components:

resources\css\vue.css

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

And with this, we can now use Tailwind in any .vue file; for example:

You modify your Vue template:

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

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.