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
Top comments (0)