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
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter