Home Laravel How to use TailWindCSS with Laravel Framework

How to use TailWindCSS with Laravel Framework

-

TailWind CSS is utility-first based css framework and it is best framework for full stack developers because of its ease of use and customer satisfaction.

In this tutorial I am going to guid you on how you can install tailwind framework inside your laravel project.

Installing tailWind framework is not simple as installing bootstrap framework, it requires little bit of configuration long with laravel Mix.

We can Install TailWindCSS on any of laravel framework old or new

Steps to install TailWindCSS

  1. Install TailWind using Npm
  2. Import TailWind CSS to Laravel CSS
  3. Generate TailWind Config File
  4. Add TailWind into Laravel Mix Build Process
  5. Build Laravel Mix
  6. Examples of Using TailWind CSS

1. Install TailWind using npm

I assume that you already have created a Laravel application if not you cal create with laravel install or composer.

okay so now open you terminal and navigate into your application root directory and execute following command, if you are windows use then open command prompt:

Install TailWind using npm

2. Import TailWind CSS to Laravel CSS

Now the tailwindcss has been added to our node_modules and we are ready to use it in our project. if you looked the app.scss file from resource folder you will see that laravel already comes with Bootstrap front end framework configured.

We can replace bootstrap with tailwind.

Go ahead and remove following lines from /resources/sass/app.scss file

And Replace with following tailwind imports:

The above tailwind directive will inject TailWind base, components and utilities styles into our app.scss

3. Generate TailWind Config File

Now the next step is to generate tailwind config file into root of our Laravel application.

This file is going to be used by laravel mix when we will build scss into css.

Execute following command to generate tailwind config file:

Generating-Tailwind-Config-file

After running above running above command if you check into root of your project you will see new file created called tailwind.config.js if you open into your code editor it should have following JS configuration written:

4. Add TailWind into Laravel Mix Build Process

Now will have to add tailwind into Laravel mix build process basically will have to tell laravel mix to compile tailwind sass using the tailwind configuration file.

Laravel mix configuration can be located at webpack.mix.js, so go ahead and open webpack.mix.js file:

You should see following default configuration:

Replace it with following configuration:

5. Build Laravel Mix

Now that we have are ready to build and compile our application assets go ahead and run following command from your terminal or command prompt:

You should see following success screen after compiling all assets:

Build Laravel Mix

6. Examples of Using TailWind CSS

Now we can use tailwind utility class into our project ok to do so I am going to demonstrate example uses of tailwind css on welcome.blade.php

First Let’s import app.css file into welcome.blade.php file:

Here is the code for login form which I have copied from tailwind components section.

Add this into body of welcome.blade.php page:

Here is how you will get the design output on webpage:


If you get any question on tutorial feel free to comment using comment section below. I hope this tutorial helped you on installing tailwind.

Git Repository of Laravel Application with Tailwind Installed: https://github.com/yogeshkoli/laraveltailwindcss

Enjoy this tutorial? Get iTech Empires updates delivered straight to your inbox.

No Spam, ever. We'll never share your email address and you can opt out at any time.

Yogesh Kolihttp://www.itechempires.com
Yogesh Koli is a software engineer & Blogger lives in India. He's driven by an addiction to learning and a love for adventure. he has 6+ years of experience working with the front-end and back-end web application development.
avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of

Tutorials You May Like!

- Advertisement -