DEV Community

Tanzim Ibthesam
Tanzim Ibthesam

Posted on

10

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

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more