I had a long hard thought about this, and I came to the conclusion it's not possible to run two CSS frameworks at the same time. It doesn't make sense. It's the same as saying one wants to run Laravel and Codeigniter at the same time. It simply doesn't make sense.
Can one use both Tailwind and Bootstrap 4 at the same time?
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 Tailwind.
I'm having a real challenge getting both to Tailwind and 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
In app.scss
// 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.
//@import "node_modules/font-awesome/scss/font-awesome";
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.
Please or to participate in this conversation.