Installing Tailwind CSS in your Laravel Project

Hello everyone 👋

In this article, I'm going to install tailwind CSS in Laravel project. This is really useful when you're taking your Laravel project to the next level (Production).

I will share each step in action so that you can follow along if you hate reading the DOCs.

In my opinion Laravel works better with tailwind. Almost everything in Laravel is styled with tailwind by default. So this will help you customize it smoothly.

Will share few tricks also after we finish that will help you hide the classes from view, and because Laravel is so awesome, we can hide classes from the view and make our code look clean and sexy 🌶️

1- Install Nodejs and npm:

• First thing you need to make sure that you have Node and npm installed on your machine.
• You can check that by opening up the terminal and type those two commands:

npm -v
node -v

• If you need to install them 🔗 DOCs for downloading Node and npm
• If you got that converged, move on 👇

2- Start your Laravel Project:

• I will use composer to create Laravel project.
• You can download composer from here: https://getcomposer.org/
• Open up your terminal and create your Laravel project in the desired directory.
• In my case, I'm just used to create my projects in htdocs folder 🤷‍♂️

3- Install TailwindCSS:

• within the project directory. Install Tailwind CSS and its peer dependencies via npm, and create your tailwind.config.js file.
• We're just going to write these two commands in the terminal which will install Tailwind along with creating a config file for your project.

4- Webpack.mix.js File edit:

• Now open you project through VScode or any preferred code editor then open 'webpack.mix.js' file, you will find it in the main directory.
• You will need to add just one line of code between the brackets [] : require("tailwindcss")

5- tailwind.config.js File edit:

• Head to the config file (tailwind.config.js) and open it.
• Here add the paths to all of your template files. I included only 4 paths in my case:

    './storage/framework/views/*.php',
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',

6- Tailwind Directives:

• Next, add the @tailwind directives for each of Tailwind’s layers to your ./resources/css/app.css file:
  @tailwind base;
  @tailwind components;
  @tailwind utilities;

• Remember, I'm not mentioning tailwind 👆😅 That's exactly how you need to write down in the file.

7- NPM Run Dev:

• Now, lets run a command in the terminal called (npm run dev) which combines all JavaScript files into a browser-friendly combined file.
• It may take few minutes, depends on your machine's speed to process the action but you need to leave it till it finishes.
• I prefer run npm run watch and leave it running in the background.

8- TailwindCSS asset:

• Open blade welcome file in -> ./resources/views/welcome.blade.css
• Delete the entire content and generate html boilerplate by typing '!' and press tap.
• Include the compiled CSS in the head section as showing in the picture.

FINALLY we're done 🥳🥳

• If you go to the terminal and in your directory run (php artisan serve) command, you will see that tailwind classes are taking effect perfectly in browser.

Of course you can find most of classes here in the official docs: https://tailwindcss.com/docs

You can hide all those classes away from the blade view so that you won't have to deal with classes from your main html file.

Lets say you want a component dedicated for the header and this will be h1 element wrapped with anchor tag with classes.

• I'm going to do it manually by creating a directory in ./resources/views and name it components.
• Create inside it a blade file and name it header.blade.php
• Copy the desired component inside it and replace it in the main blade file with
• Then merge attributes.

Now we installed Tailwind in our Laravel project, created a component and merged the attributes to hide tailwind classes from the main view.

Thank you all for reading this article.
If you like this article please let me know :)