Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 28, 2021 09:04 am GMT

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();`

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


Original Link: https://dev.to/tanzimibthesam/how-to-install-both-tailwind-and-bootstrap-5-in-a-laravel-project-393h

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To