eugenevdm
6 months ago
3856
5
Mix

Can one use both Tailwind and Bootstrap 4 at the same time?

Posted 6 months ago by eugenevdm

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 sign in or create an account to participate in this conversation.