Bootstrap a Laravel 7 + Tailwind CSS project
Tags: laravel, beginners, css
Published: 2020-03-19 19:08:11

I've decided to redesign and upgrade my website with Tailwind CSS and Laravel 7 so here is a quick guide of how to bootstrap a project that uses both of them.

## Install Laravel 7

The first thing to do is to make sure your system meets the requirements, mainly having PHP 7.2, composer and some extensions. Then as detailed in the [Laravel official docs](https://laravel.com/docs/7.x/installation) run _composer global require laravel/installer_  and then use _laravel new my-project_ to generate the project scaffold.

Additionally, you can run _composer create-project --prefer-dist laravel/laravel my-project_.

Once your project is created, you can run _php artisan serve_ from the project folder to start a local server and open localhost:8000 in your browser to see the default Laravel welcome page.

## Add Tailwind CSS to your Laravel 7 project

The next step is to add Tailwind to the project. I found plugin by Jeffrey Way that makes this super easy. Install it with _npm install laravel-mix-tailwind --save-dev_ and then modify the file webpack.mix.js so it's like the next one:
```js
const mix = require('laravel-mix');

// for Tailwind: https://github.com/JeffreyWay/laravel-mix-tailwind
require('laravel-mix-tailwind');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .tailwind();
```
But what is this for? If you check the package.json file of your project, you can see that there is a dev/development script. These scripts run Webpack which is a module bundler that will take care of compiling our css or scss and js files in the resources folder and put the results in the public directory. It's normally used for javascript but we're going to use it for our css for now.  

As detailed in the Tailwind docs, we need to import the Tailwind base and components to our css or scss file. Inside the resources folder, create a folder named "scss" and inside it, create a file named app.scss. In this file copy the following imports:
```scss
/* 
* resources/sass/app.scss
*/

// Imports Tailwind CSS
@tailwind base;

@tailwind components;

@tailwind utilities;
```
The next step is to generate a Tailwind config file. We can create it manually or we can generate it with the command _npx tailwindcss init_.  This will generate an empty file but Tailwind allows you to customize your fonts, colours and a lot of other things in this file so check the [corresponding page of their official docs](https://tailwindcss.com/docs/configuration/) for more info.  

Now if you run _npm run dev_ , Webpack should start to compile and generate the files in your public folder.

* * *

**NOTE**: The current version of laravel-mix-tailwind contains a bug as it expects the file tailwind.config.js to be named tailwind.js. The error in the console is:
```bash
_Error: Specified Tailwind config file "/Projects/my-project/tailwind.js" doesn't exist._
```
You can rename the file to match what it expects or you can change the line where it's hardcoded in the file /node_modules/laravel-mix-tailwind/index.js (line 14).

* * *

After Webpack finishes compiling, if you check the file public/app.css you can see there are a lot of classes in it (it will have more than 65k lines!). That's Tailwind being added to your project. Now if you include the app.css file in your views, you'll be able to use all the Tailwind classes 💪 .  

## Adding PurgeCSS to your Laravel 7 project  

One of the inconveniences of Tailwind CSS is its size. As it has so many classes the size of the whole library is very big but we can use purgeCSS to remove all classes we are not using in our project. Similar to what we did to install Tailwind, we need to install a Laravel Mix plugin, in this case with the command _npm i laravel-mix-purgecss --save-dev_. Once installed, we need to add a few lines to our webpack.mix.js file:

```js
const mix = require('laravel-mix');

// for Tailwind: https://github.com/JeffreyWay/laravel-mix-tailwind
require('laravel-mix-tailwind');

// for PurgeCSS
require('laravel-mix-purgecss');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    // .less('resources/less/app.less', 'public/css')
    .tailwind()
    .purgeCss({
        enabled: mix.inProduction(),
        folders: ['src', 'templates'],
        extensions: ['twig', 'html', 'js', 'php', 'vue'],
    })
    .setPublicPath('public');
```

With this configuration, we'll only run purgeCSS when we generate our production build with _npm run prod_. Go ahead and run it and compare the file sizes with the ones generated with _npm run dev_ . In my case, the difference in the app.css file is 3.59Kb in production and 1.23Mb in development. That'll make a huge difference in the loading time of our web!

* * *

**NOTE**: if you want to add a more specific config to purgeCSS, you can create a file named postcss.config.js as detailed [in this link](https://tailwindcss.com/docs/controlling-file-size).

* * *

Hope you find this useful. I've uploaded a scaffolded project to [this public repo in GitHub](https://github.com/uF4No/laravel7-tailwind) so you can just clone it and start using it as the base for your next project. Just remember to follow the instructions in the Readme to install all dependencies!  

Happy coding!

* * *

_This article was originally posted in [my website](https://antonioufano.com). If you like it, you may find interesting previous articles in [my blog](https://antonioufano.com/blog)_