[How-to] Configure A New Laravel Project (With Tailwind CSS)

Recently, I have been working on few laravel projects and every time I configure new project, I end up making a critical error by either missing/forgetting some important steps. No doubt, Laravel documentation is excellent and does a great a job in installing/setting up the laravel, but there still are several things that needs to be configured before we can really start working. So I came up with this checklist that serves as a ready reckoner to setup and configure a new laravel project.

Create a new laravel project using the laravel installer by running the below command:

composer create-project --prefer-dist laravel/laravel <project-name> "5.5.*"

Create a MySQL database from command line:

mysql -u<mysql-username> -p create database <project-database-name>;

Out-of-the-box, Laravel provides us with an .env file to configure our project. Let's update that file with the above database credentials.

DB_DATABASE=<project-database-name>

DB_USERNAME=<mysql-username>

DB_PASSWORD=<mysql-password>

In 99% of my projects, I use out-of-the-box authentication. Make sure, you are in the projects root directory and execute the below command. If you don’t need out-of-the-box authentication, you can feel skip this step.

php artisan make:auth

Once the above step is performed, you can run the migration and create the authentication tables.

php artisan migrate

Install the JS packages by running the below command from the projects root directory

npm install

Install other dependencies that are required before starting the development. In my recent projects, I have been using Tailwind CSS and hence would be adding that as an initial dependency.

Install the tailwindcss package:

npm install tailwindcss --save-dev

Run below command to generate the config file

./node_modules/.bin/tailwind init

I prefer using sass, so update the app.sass file with below (in same order):

@tailwind preflight
@tailwind utilities

Add below line on top of webpack.mix.js

let tailwindcss = require('tailwindcss');

And lastly, replace the sass() code with below:

.sass('resources/assets/sass/app.sass', 'public/css').options({ 
    processCssUrls: false, postCss:[tailwindcss(‘./tailwind.js')], 
});

Yay! We are ready to start coding. Run the below command from the projects root directory to start the PHP’s built-in server and start development.

php artisan serve

That’s it. I hope this checklist helps to configure a new laravel project in minutes, and thereby avoid any obvious mistakes that takes away the productive time from actual development.

Happy Coding! :)

Originally published at milanchheda.com on February 9, 2018.