How to install both Tailwind and Bootstrap 5 in a Laravel project
Tanzim Ibthesam
Posted on May 28, 2021
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";
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
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();`
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
Posted on May 28, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.