How to install both Tailwind and Bootstrap 5 in a Laravel project

tanzimibthesam

Tanzim Ibthesam

Posted on May 28, 2021

How to install both Tailwind and Bootstrap 5 in  a Laravel project

Often I have encountered problems in installing Bootstrap and Tailwind so Today I will write about how easy it actually is but if you try to dind out things on your own it might take a lot of time.
First install Laravel
laravel new bootstrap-tailwind
Cd onto project directory then in CLI **
npm install
**Next step install bootstrap 5

npm install bootstrap@next
Install PopperJs
npm install @popperjs/core
In resources folder we have to create a scss folder inside app.scss
In app.scss
@import "~bootstrap/scss/bootstrap";
Alt Text
In Webpack.mixin.js
mix.js("resources/js/app.js", "public/js")
.sass('resources/scss/bootstrap.scss', 'public/css')
.sourceMaps();

Then run npm run dev
Install Tailwind
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init
In resorce folder inside css folder create tailwind.css file
Alt Text
In that file we need to copy paste
@tailwind base;
@tailwind components;
@tailwind utilities;

In webpack.mixin.js
`mix.js("resources/js/app.js", "public/js")

.postCss("resources/css/tailwind.css", "public/css", [
 require("tailwindcss")

])
.sass('resources/scss/bootstrap.scss', 'public/css')
 .sourceMaps();`
Enter fullscreen mode Exit fullscreen mode

Finally npm run dev
If you try this you can install both bootsrap 5 and Tailwind in same project. AT first time you may need to run npm run dev twice

💖 💪 🙅 🚩
tanzimibthesam
Tanzim Ibthesam

Posted on May 28, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related