Setting Up TailwindCSS on Laravel

Prince Sinha  on December 17, 2020

Tailwind is a modern CSS framework. It is a utility-first-based framework and provides you with a unique set of utility classes which makes the development process very easy and results in making a unique design. Utility-first CSS is fast, robust, and very efficient making your coding hassle-free. Tailwind CSS is also not opinionated; it means you are totally free to customize the design lament and website’s component.

Tailwind is a power pack of everything you need to create a website without writing any custom CSS.

Laravel is a complete framework for application development. It is an open-source PHP framework in which development is robust and easy. Most importantly it is easy to maintain the quality of code while using Tailwind CSS with Laravel when compared to custom CSS.

In this article, I will give you a step by step tutorial of setting up Tailwind CSS with Laravel and a short demo code on how we can use Tailwind CSS in our project. After the end of the article, you will understand how to implement Tailwind CSS with Laravel and use it in your project.

Here are the topic which we are going to cover in this article:

Step 1: Set up Laravel

Laravel uses Composer to manage dependencies so if you do not have a composer in your system download it from getcomposer.org by simply clicking a button. After you have downloaded the composer run the following command to install Laravel.

composer global require laravel/installer

Now after Laravel installation is complete, run the following command to create your first Laravel project.

laravel new LaravelTailWind

This command will create a simple Laravel Project on your system with basic folders and files.

After that go to the root folder run composer install command, it will install all the necessary packages required for the Laravel app.

Next, navigate to the applications root folder, and run the following command to run the app on the server.

php artisan serve

After successfully executing the command you will see a default page, which means you have successfully configured all the things.

The next step is installing Tailwind CSS via npm.

Step 2: Installing Tailwind CSS

Tailwind CSS can be installed with the help of the node package manager. Assuming you have already created a Laravel project. Open your IDE and go to the root directory of your project. To run the npm command you must install a node on your system. To verify if Node is installed, type `node --v` in the terminal and it will give the version of Node installed on your system. 

If NodeJs is not installed on your machine you can download it from the official website. 

After going to the root directory of your project in the terminal type

npm install tailwindcss

It will import all required dependencies and Tailwind CSS and a new folder of tailwind CSS will be formed in the node_modules folder of the project.

Yarn

Yarn is also similar to npm, so if your package manager is yarn then type the following code for installing tailwindcss:

yarn add tailwindcss

CDN

We don't prefer CDN because it restricts the full use of tailwindcss. You will not be able to use Tailwind’s default theme, use any directives like `@apply`, `@variants`, and cannot install third-party plugins.  You can find more drawbacks of using CDN here. To make full use of TailWindCSS you should directly incorporate it into the build process. However, if you want to go for CDN then use the following:

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

Import Tailwind to Laravel CSS

Now we have already installed Tailwind CSS and we are ready to use it. In the resource folder of your app, you can see a file named `app.scss` already contains some of the bootstrap frontend framework configured. Since the main purpose of this blog is to teach Tailwind CSS with Laravel, we will be removing all bootstrap frontend framework and add Tailwind CSS there. Remove the following line from resources/sass/app.scss file:

/// Fonts/
/@import/ url('https://fonts.googleapis.com/css?family=Nunito');

/// Variables/
/@import/ 'variables';

/// Bootstrap/
/@import/ '~bootstrap/scss/bootstrap';

Note: If you are using laravel 8 or above you will see anything in the resources/sass/app.scss file. Laravel 8 does not include this bootstrap and scss content, but previous versions have some inbuilt bootstrap and preprocessor like scss.

Now add these line for adding Tailwind CSS for injecting TailWind’s base, component, and utilities into your app:

@tailwind base;

@tailwind components;

@tailwind utilities;

Create the Tailwind config file

In this step, we will be creating a Tailwind config file or in other words, we will be initializing Tailwind in our project. This file named `tailwind.config.js` is used by Laravel mix(webpack) when we convert SCSS into CSS. 

Run the following command in the terminal:

npx tailwind init

After running the above command in the root of our project we can see a new file `tailwind.config.js` and when you open it in your code editor you will see the following code:

module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
}

Every section of the config file is optional, you can change any section according to your purpose. But if any missing value remains, the config file will be back to its default configuration.

You can see more details about this file in the official docs of TailwindCSS .

Include Tailwind in the Laravel Mix Build Process

Now we will have to include Tailwind in the Laravel Mix (internally using webpack) to instruct it to compile Tailwind sass using the tailwind configuration file.

The configuration of Laravel Mix can be located at `webpack.mix.js`. Now open the `webpack.mix.js` file in your IDE. The present code will look something like that.

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

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

Now replace the existing code with the following lines.

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

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

Please note here that we are not using any preprocessors, just plain CSS. If you are using any preprocessors then you might need to make some changes. Refer to the official docs for more information.

Build Laravel Mix and Run NPM

Now our project is ready to build and compile, so go ahead and run the following command in our terminal and see the result. It will compile tailwindcss code and put them into app.css, a file located in the public/css directory.

npm install 

npm run dev

For ease of use, we can also `npm run dev` instead of `npm run dev`. Whenever we make changes we have to re-run `npm run dev` to see those changes but `npm run dev` automatically picks up whenever we make changes in code and reflect it in our site.

Examples: Tailwind CSS + Laravel

Now we have done all the installation steps of Tailwind, it’s time to test it. For doing this we have to first import the `app.css` file in the `welcome.blade.php` file. Copy-paste the following line.

<link href="{{ asset('css/app.css') }}" rel="stylesheet">

Now you are good to go. Use this in your project. An example of the use-case is given below.

<div class="md:flex container border p-4">
                    <div class="md:flex-shrink-0">
                        <img class="rounded-lg md:w-56" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=448&q=80" alt="Woman paying for a purchase">
                    </div>
                    <div class="mt-4 md:mt-0 md:ml-6">
                        <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Marketing</div>
                        <a href="#" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">Scout APM</a>
                        <p class="mt-2 text-gray-600">Use Scout APM for better performance tracking.</p>
                    </div>
                </div>

We have made a very basic project using Tailwind CSS with Laravel. Using Tailwind CSS  you can get rid of more confusing CSS and it will reduce code complexity from your project. 

If you love using components in your website then Tailwind will be the right choice for your project. Tailwind does not give you predefined components; you can use its utility class to make unique custom components. You don't even need to worry about naming. For more details and learn more things about Tailwind CSS refer to their official website. Combining TalwindCSS with your creativity can give extraordinary results.

Now it's your turn to use Tailwind CSS with Laravel and make some creative websites. Happy coding.