tailwind on laravel

How to install Tailwind CSS on Laravel 8

Hey Everyone,

Are you a Laravel dev?

Am sure by now you have heard of a CSS framework known as Tailwind CSS. And you are probably wondering why so many devs are running towards it or why is it becoming popular especially to the Laravel community.

I myself have been using bootstrap in all my projects since 2013. Boostrap has been the go-to CSS framework for most developers for a number of years, but recently tailwind has been gaining popularity among developers.

In this article, I will be narrowing down on the following.

1. What is Tailwind CSS ?
2. How is it different from bootstrap?
3. How to install Tailwind CSS on Laravel version 8?

What is Tailwind CSS?

Tailwind CSS is a “utility-first” CSS framework that provides a deep catalog of CSS classes and tools that lets you easily get started styling your website or application.

Tailwind CSS provides a wide variety of CSS classes that each have their own role of use. Instead of a class called .btn that is created with a bunch of CSS attributes directly, in Tailwind, you would either apply a bunch of classes like bg-blue-500 py-2 px-4 rounded to the button element or build a .btn class by applying those utility classes to that selector.

All web artisan should use tailwind

So How is it different from bootstrap?

Bootstrap is based on the Object Oriented CSS methodology which has become one of the most popular ways of managing stylesheets and classes. Meaning most of the bootstrap classes are modularized or componentized ready for you to use instead of having the developers create their desired components.

In Tailwind, the framework is more of utility first and not componentized hence to achieve the desired look the developer needs to write a line of a combination of classes this gives much freedom to the developer hence one can see that most bootstrap ui's are alike but with Tailwind, one can build unique UI components.

Let's look at a visual difference

Bootstrap Primary Button

<button type="button" class="btn btn-primary">Primary</button>

Tailwind CSS Button

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

Both elements will render the same UI component but the main difference here is that with bootstrap these components' CSS are predefined while on tailwind one has to add a number of utility CSS classes that define how a UI component should look like.

How To Install Tailwindcss In Laravel 8

There are many ways to install Tailwindcss on a fresh Laravel 8 install. Lets look at a few here.

Install Tailwindcss

First, let’s install NPM dependencies

npm install

Now install tailwindcss via npm

npm install tailwindcss

Add Tailwindcss to your resources/css/app.css

You don’t have to install autoprefixer or postcss-import, because it’s already installed with laravel mix

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Create your Tailwind config file

npx tailwindcss init

Update your webpack.mix.js file

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
    ]);

Compile your assets

Finish by compiling your assets and you’ll be ready.

npm run dev

You should be good to go.

Before you go… Thanks for reading the article! If you enjoyed it, please don’t forget to show your appreciation by clicking 👏 below!

Any questions or comments hit me up on

Mail: epmnzava@gmail.com

Twitter: https://twitter.com/epmnzava

Github: https://github.com/dbrax

Do you have an idea of an application either mobile / web or desktop please visit primeware.co.tz we have the best team ready to listen to your idea.

Until next time cheers