eugenefvdm's avatar

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.

0 likes
11 replies
eugenefvdm's avatar

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.

2 likes
Louis.G's avatar

well you can ru Laravel and Codeignitier at the same time and it makes a lot of sense when refactoring from the one to the other.

oliveira11670's avatar

@Louis.G I believe you can use some aspects of one platform and others from the other one. for instance, you can use sizing and placing and grid from tailwind and buttons, nav, tab's and so on from bootstrap, correct me if i'm wrong. This laravel/codeigniter comparison was a little poor, you canot mix php frameworks, but you could use distinct parts of 2 javascript/css frameworks as long as they don't conflict

jago86's avatar

Well, I succesfully used Bootstrap 4 with Tailwind becuase the project already had a template made in B4, but I still want to had the flexibility that Tailwind gives. Heads up that there are some collisions in classes names.

1 like
phrane's avatar

Yes, I am currently working on a tailwindcss-laravel project, but a blogging component I've added utilises bootstrap 4 views, so currently using both, until I port the views over to tailwind.

Note, I've come across a tool called tailwindo (https://awssat.com/opensource/tailwindo/) which should be able to automate the conversion from b4 to tw.

jcusters's avatar

I had the same problem and I solved it by using two base layouts one with bootstrap cdn's for the legacy pages and another base layout with @vite (tall stack) for the new tailwind pages

1 like

Please or to participate in this conversation.