By default, Laravel ships with Bootstrap as its front-end component library. In some cases you may prefer to use other alternatives like tailwind css. Fortunately, the process is not that complicated and here’s how I did it.
I started by removing bootstrap and its related dependencies (highlighted) in the package.json file. You do not need these unless you want to use both bootstrap and tailwind. Next, we need to navigate to where these dependencies are used and remove them completely.
After that, delete the ‘try and catch’ code from ‘resources\js\bootstrap.js’. Do not get confused by the file name because it refers to bootstrap literally (not bootstrap css).
Finally, we can start installing tailwind css onto our project.
Use ‘npm install tailwindcss’ or ‘yarn add tailwindcss’ if you are using either one of them.
Go to ‘resources\sass’ and edit the app.scss file. Replace the bootstrap import with tailwind imports.
Next, we need to set up configuration file for tailwind. Make sure you run ‘npm run dev’ first. Generate the config file by entering ‘npx tailwindcss init’. This will create a minimal tailwind.config.js file at the root of your project.
Finally, we will need to let Laravel mix know that we are using tailwind css as our package. Go to ‘webpack.mix.js’ at the root of your project, require tailwind css along with the path to its config file. Also set ‘processCssUrls’ to false. (**Taken from tailwindcss documentation: Note for Sass users: Due to an unresolved issue with one of Mix’s dependencies, to use Sass with Tailwind you’ll need to disable processCssUrls.)
Run ‘npm install’ and ‘npm run dev’ to make sure everything is set up alright and voila you have done it. You should be able to reference tailwind css in your files and customize it from its configuration file now.
Disclaimer: what I said in this article may not have been accurate. I wrote this tutorial mostly for myself.
