How to integrate Tailwind with Laravel

Overview

PHPHypertext Pre-processor is an open-source multi-purpose scripting language well suited for writing server-side scripts, making websites dynamic and fast in terms of their communication with web servers. There are so many frameworks built on PHP and are in use today. Some popular ones are:

• Code Igniter
• Symfony
• Cake PHP
• Laravel

Laravel

This is an open-source, very popular, and well-used PHP web framework that gets you up and running in a few minutes when it concerns putting together a website powered by PHP. It is an MVCModel View Controller pattern framework which comes with special provision for things like :

• ModelsConcerned with data structuring, data management, business techniques, and logic
• Viewhow data is displayed, viewed, and interacted with, simply put UI
• Controllerspushes command to the models and views

One special thing with Laravel view is that Laravel provides a tool that helps developers integrate third-party UI templates/frameworks of their choice into their project to improve their application’s user interface. Some of these User Interface frameworks include:

• Bootstrap
• Foundation
• Material UI
• Tailwind and so on.

This Laravel helper tool is the laravel mix.

Laravel Mix

Laravel mix is developed by Jeffrey Way, a package that comes with fluent API, which defines steps for your web-pack build in your laravel application using a good number of readily available CSS and JavaScript pre-processors. With this package, you can easily integrate bootstrap and tailwind in your application and use their classes to style your applications.

Tailwind

Tailwind is a very fast-rising open-source utility-first UI web framework. It allows us to apply unique styles right from the HTML to your application.

How to integrate Tailwind in your Laravel projects

Follow the steps below to get all the Tailwind styles integrated into your project so that you can access them as you wish.

Step 1

You must have a laravel project up and running. If you don’t have it, you can use the following command to run it:

laravel new name_of_your_project

It will create a new laravel project for you only if you have PHP and laravel properly installed.

Next, run the following command in your new project:

laravel new name_of_your_project

It will install all the Javascript and UI default dependencies.

Step 2

Open the project in the code editor and navigate to the project directory you just created. Use the following command to install the latest Tailwind version in your project:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

We can also use the following command:

npm install tailwindcss

Step 3

We can use this command below to generate your tailwind.config.js file.

npx tailwindcss init

In this config.js file you can set up your options and preferences.

Step 4

The next thing is to locate the webpack.mix.js, which should look like this initially:

Add tailwindcss as a PostCSS plugin by adding the following code line to this file:

require("tailwindcss"),

After doing making the change, the webpack.mix.js file should now look something like the code block below:

Step 5

Now go to your resources folder and locate the css folder. Open the app.css file and add these code lines into it.

resources/css/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 6

We are all set up. Let’s install all CSS and javascript dependencies, using the following command:

npm install

To successfully pipe the tailwind into your project, use the command below:

npm run dev

To start using its styles, you have to do one last thing: add the Html link to Tailwind CSS using the assets helper in your base template, as shown below:

<link href="{{assets('css/app.css')}}"/>

And that’s how you can simply integrate tailwind into your project and start enjoying seamless styling in your HMTL.

You can check in the public folder and locate the css folder, you will find an app.css file in it, and also in the public/js folder, you will find an app.js file which was added due to the run dev command.