I am trying to ease myself into
Tailwind. My Laravel UI is currently
Vuejs which seems to use
Bootstrap 4 CSS as well.
I was hoping that I would load
Tailwind and still have
Bootstrap operational as I start moving over.
I am aware that there are presets for Tailwind and the UI, but I would prefer to build it up slowly instead of suddenly diving into a new UI that is already completely
I'm having a real challenge getting both to
Bootstrap 4 work together. Perhaps they are not supposed to?
So far I have done:
composer require laravel/ui php artisan ui vue --auth install npm install tailwindcss
// Fonts @import url('https://fonts.googleapis.com/css?family=Nunito'); // Variables @import 'variables'; // Bootstrap @import '~bootstrap/scss/bootstrap'; // Font Awesome added post installation @import "node_modules/font-awesome/scss/font-awesome"; @tailwind base; @tailwind components; @tailwind utilities;
Here things already go wrong,
Font Awesome suddenly can't install.
ERROR in ./resources/sass/app.scss Module build failed (from ./node_modules/css-loader/index.js): ModuleNotFoundError: Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.eot' in '/home/eugene/code/shop/resources/sass'
No problem, I comment it out as I'll figure that out later.
At this point I am lost!
According to the
Tailwind documentation I must "Process your CSS with Tailwind" and then the only reference to Laravel is if you're using plain CSS. See below
Laravel Mix If you're writing your project in plain CSS, use Mix's postCss method to process your CSS and include tailwindcss as a plugin:
Am I supposed to include it? Or not?
When I do include it, and my webpack.mix.js file looks like this:
mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); mix.postCss('resources/css/main.css', 'public/css', [ require('tailwindcss'), ])
Tailwind classes do not work on the front-end.
I guess if it's completely impossible to use both Bootstrap 4 and Tailwind together, a quick HOWTO on getting Tailwind working will also be fantastic as the proper install manual is confusing me as a Laravel user.