How to install Tailwind CSS in Laravel
Tags: tailwindcss, programming, laravel, webdev
Published: 2021-10-10 01:01:18

---
title: How to install Tailwind CSS in Laravel
published: true
date: 2021-01-10 01:16:04 UTC
tags: [tailwindcss, programming, Laravel, webdev]
canonical_url: https://www.devwares.com/blog//how-to-install-tailwind-css-in-laravel
cover_image: https://www.devwares.com/blog/images/tailwind-css-in-laravel.png
---

Tailwind CSS is a utility-first class CSS framework unlike other CSS frameworks like material UI and Bootstrap. 
It offers a lot of advantages in which you can check some of it in our article Why Tailwind CSS is so good.
In this Tailwind CSS tutorial, we are going to look at how to install Tailwind CSS in Laravel. This is especially great because using tailwind with Laravel offers Php developers a lot of advantages that other frameworks fail to do.  
Installing tailwind CSS in Laravel is not that simple as it requires a bit of configuration along with the Laravel mix. 
However, we are going to work you through on  step by step on how to do this.

## Table of content

- Creating the project
- Install Tailwind CSS 
- Create your configuration file 
- Configure the Tailwind Css to larval Mix
- Include tailwind in your CSS
- Building a form using tailwindcss in laravel
- Conclusion 

 
## Install Tailwind CSS with 

## Creating the project

We must first create our project before we can start using the tailwind CSS in larval. You can create this by running the following command on the Laravel installer

**Code**

```javascript
laravel new my-project
cd my-project. 

```

In the code above we created our new project using the command “laravel new my-project”. You can name your project anything you wish we used my-project in our own. We went ahead to navigate to the root of our app. 
We are going to install Laravel dependencies by using the ‘npm’

**Code**

```javascript
npm install laravel 

```

this command will install all the packages you need for the larval app.
After this, we can go ahead to install Tailwind CSS in larval app.

## Install Tailwind CSS 

These are some of the ways you can install tailwind css in Laravel. These ways include:


**Using npm**


You can install the Tailwind CSS in larval using this method by running the following command on your terminal

**Code**

```javascript
npm install tailwindcss

```

this command makes sure that tailwind CSS is installed in our project.
Using yarn
You can use yarn which is a good package manager to install your tailwind by running the following command

**Code**

```javascript
yarn add tailwindcss
```


## Using a CDN

This method is not the best option to install your tailwind CSS in the Laravel app. It does not enable all the features tailwind CSS has to offer.
You can use this method by simply copying the CDN from the tailwind website 

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

Although, in this project I will be using npm to install the Tailwind CSS with larval.  I will go to the root of our application and run the following command in the terminal


**Code**

```javascript
npm install -d tailwindcss@latest postcss@latest autoprefixer@latest
```

## Create your configuration file 

we must create the configuration file because is used by Laravel mix when building the CSS from the resource folder to the public folder’s app.css.
we can generate the configuration file by running the following command 

**Code**

```javascript
npx tailwindcss init.
```

The command above will generate a file on your larval app root, the file will be named tailwind.config.js. open it on your text editor or an IDE. The code below will be seen on it.

**Code**

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

The code above is the default setting and you are free to make changes to it.  You can find more about the configuration file on the tailwind documentation.

## Configure the Tailwind Css to larval Mix

At the root of your application. In Laravel ‘s Mix in the webpack.mix.js, you need to add ‘tailwindcss as a PostCSS plugin. To do this simply, write the following code to the file
**Code**

```javascript
// webpack.mix.js

mix.js(“resources/js/app.js”, “public/js”)
.postCSS(“resources/css/app.css”, “public/css”, [
require(“tailwindcss”),
 require("autoprefixer"),

]);
```


## Include tailwind in your CSS

You will need to import the tailwind from the app.css using the path `./resources/css/app.css`. As this was generated by default and replace the original file contents with `@tailwind` directives to include Tailwind’s `base`, `component`, and `utilities` styles.

**Code**

```javascript
/* ./resources/css/app.css */

@import "~tailwindcss/base.css";
@import "~tailwindcss/components.css";
@import "~tailwindcss/utilities.css";

```

The new changes will enable tailwind to swap these directives out at build-time along with all the styles it generates based on the configuration design system.
Now import your stylesheet in your main Blade layout and add the appropriate responsive viewpoint meta tag if you haven’t done that already.

```html
<!DOCTYPE html>
  <head>
    <!-- ... --->
+   <meta charset="UTF-8" />
+   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+   <link href="{{ asset('css/app.css') }}" rel="stylesheet">
  </head>
  <!-- ... --->
```

You can go ahead to build the application you want using Tailwind CSS with Laravel. When you run ‘npm run watch’, ‘npm run dev’, or ‘npm run prod’, Tailwind CSS will be available in your Laravel Mix Project. 

## Building a form using Tailwind CSS in laravel

As we have seen how to install Tailwind CSS in a laravel project. We  are going to build a simple form to demonstrate that our Tailwind CSS is actually working.
Open the resource folder and click on the welcome.blade.php file. Inside the file delete the body of the code.
You can now go ahead and add the following code to the body of the page.


**Code:**

```html
<body>
       <div class="bg-gradient-to-br from-purple-900 to-indigo-900 
          flex flex-wrap items-center 
          justify-center min-h-screen">
           <form class="w-full max-w-md bg-white shadow-md rounded px-8 pt-8">
            <div class="mb-4">
               <label class="text-gray-800 text-sm block font-bold mb-2 pb-2">Username</label>
               <input class="shadow appearance-none border 
                  rounded w-full py-2 px-3 text-gray-700 leading-tight 
                  focus:outline-none focus:shadow-outline" id="username" type="text" 
                  placeholder="Username">
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 text-sm font-bold mb-2">Password</label>
                <input class="shadow appearance-none border 
                    border-red-500 rounded w-full py-2 px-3 
                    text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" 
                    type="password" placeholder="**************">
                <p class="text-purple-500 text-xs italic">Please choose a Password.</p> 
            </div>
            <div class="flex items-center justify-between">
                <button class="bg-purple-500 hover:bg-indigo-700  
                  text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" 
                  type="button"> 
                    Sign in 
                  </button>
                <a class="inline-block align-baseline 
                  font-bold text-sm text-indigo-500 hover:text-indigo-900" href="#"> 
                    Forgot Password?
                  </a>
            </div>
            <div class="px-8 pt-8">
                <p class="text-center 
                  text-gray-900 text-xs 
                  font-bold">@2022 Devwares develop. All rights reserved.
                </p>
            </div>
           </form>
           
       </div>
    </body>
</html>
```

Below is how our webpage should look once we have saved our file. And reloaded our server.

![Tailwind CSS in Laravel](https://www.devwares.com/blog/images/tailwind-css-in-laravel2.png)

###Conclusion 

In our tailwind CSS today, we look at how to install Tailwind CSS in laravel project and also went ahead to test whether our Tailwind CSS is working on our laravel by building a sign in form. I hope you enjoyed this tutorial.

## Design and code Tailwind CSS websites 3x faster

We created a tool to visually build Tailwind CSS components, prototypes, websites, and web apps. Ship projects faster using an intuitive tailwind builder and editor.[Try Windframe out for free.](https://www.devwares.com/windframe)

![WINDFRAME](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8w3qu4a93bdkhtjnhbh.png)

## Resources 

- [How to create Tailwind CSS Modal](https://www.devwares.com/blog/how-to-create-tailwind-css-modal)

- [How to use tailwind CSS in HTML]  (https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML)

- [Get Contrast PRO](https://www.devwares.com/product/contrast-pro)

- [Why tailwind CSS is good](https://www.devwares.com/blog/why-tailwind-css-is-good)

- [How to use Tailwind CSS in Nextjs](https://www.devwares.com/blog/tailwind-css-in-nextjs)

- [How to create Tailwind CSS Components for your Website](https://www.devwares.com/blog/how-to-create-tailwind-css-components-for-your-website)

- [How to create Tailwind CSS Animation](https://www.devwares.com/blog/create-animation-with-tailwind-css/)

- [Tailwind grid-How to use tailwind CSS grid templates in your project](https://www.devwares.com/blog/how-to-add-tailwind-css-grid-to-your-project/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind form-How to create and style a Responsive Form using Tailwind CSS](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/)

- [Tailwind CSS Flex: How to use Tailwind CSS Flex](https://www.devwares.com/blog/how-to-use-tailwind-css-flex/)

- [How to use tailwind CSS padding, margin and border in your project](https://www.devwares.com/blog/how-to-use-tailwind-css-padding-margin-and-border-in-your-project/)

- [Tailwind CSS CDN-How to use the Tailwind CSS JIT CDN](https://www.devwares.com/blog/how-to-use-the-tailwind-css-JIT-CDN/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [How to use Tailwind CSS in HTML](https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML/)

- [Tailwind CSS table-How to Create Tailwind CSS tables](https://www.devwares.com/blog/how-to-create-tailwind-css-tables/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [Why is tailwind CSS better than other CSS framework](https://www.devwares.com/blog/why-tailwind-css-is-good/)

- [10 tailwind CSS templates and themes](https://www.devwares.com/blog/tailwind-css-10-templates-and-themes/)

- [How to add tailwind CSS colors and Fonts to your project](https://www.devwares.com/blog/how-to-add-tailwind-css-colors-and-fonts-to-your-project/)

- [Differences between Tailwind CSS and SASS](https://www.devwares.com/blog/differences-between-tailwind-css-and-sass/)

- [Differences Between Tailwind CSS and Bootstrap](https://www.devwares.com/blog/diffrences-between-tailwind-css-and-bootstrap/)

- [10 Awesome projects built with Tailwind CSS](https://www.devwares.com/blog/awesome-10-projects-built-with-tailwind/).

- [How to install Tailwind CSS in Vue.js](https://www.devwares.com/blog/how-to-install-tailwind-css-in-vuejs/).

- [How to use Tailwind CSS in React](https://www.devwares.com/blog/how-to-use-tailwind-css-in-react/)

- [How to install Tailwind CSS with Laravel](https://www.devwares.com/blog/how-to-install-tailwind-css-in-laravel/)

- [How to create react date picker](https://www.devwares.com/blog/create-datepicker-with-contrast/)

- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/).

- [How to create a beautiful React multiselect](https://www.devwares.com/blog/create-multiselect-with-contrast/).

- [How to create a beautiful React Bootstrap progress bar](https://www.devwares.com/blog/create-progress-with-contrast/).

- [How to create a beautiful React Bootstrap select with icons](https://www.devwares.com/blog/create-select-with-contrast/).

- [How to create a beautiful Bootstrap 5 stepper](https://www.devwares.com/blog/create-stepper-with-contrast/)

- [How to create a beautiful React Bootstrap table]
(https://www.devwares.com/blog/create-tables-with-contrast/)

- [How to create beautiful React Bootstrap tabs](https://www.devwares.com/blog/create-tabs-with-contrast/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind Modal-How to create a React Modal using Tailwind CSS.](https://www.devwares.com/blog/how-to-create-a-react-modal-using-tailwind-css/)

- [How to create a Bootstrap 5 Modal.](https://www.devwares.com/blog/how-to-create-a-bootstrap5-modal/)

- [How to Create React Tabs with Tailwind CSS](https://www.devwares.com/blog/how-to-create-react-tabs-with-tailwind-css/)

- [How to implement dark mode in React using tailwind css](https://www.devwares.com/blog/how-to-implement-dark-mode-in-tailwind-css/)

- [How to Implement a React Step Progress Bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-implement-a-react-step-progress-bar-using-tailwind-css/)