Skip to content

All topics  /  Laravel

Laravel 10 Install Tailwind CSS Example

Laravel

Teams applying “Laravel 10 Install Tailwind CSS Example” in a production project can use the linked methodology to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the official Laravel website and test it against the project’s actual database and runtime.

Mar 03, 2023

Laravel 10 Install Tailwind CSS Example

Hi friends,

This tutorial is focused on example of How to install tailwind css in laravel 10?. we will help you to give example of install tailwindcss on a fresh laravel 10 install. you can understand a concept of step by step how to install Tailwind css In Laravel 10. it's simple example of Tailwind css in laravel 10.

There are many ways to install Tailwindcss on a fresh Laravel 10 install. You can configure your application by yourself or use a Preset to do it faster. We'll start with the custom one, and skip to the end to check available presets.

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

Download Laravel


Let us begin the tutorial by installing a new laravel application. if you have already created the project, then skip following step. 

composer create-project laravel/laravel example-app

Install tailwind v3 

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Setup larvel Mix configuration to add tailwindcss

webpack.mix.js 

const mix = require('laravel-mix');
/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */
mix.js("resources/js/app.js", "public/js")
    .postCss("resources/css/app.css", "public/css", [
    require("tailwindcss"),
]);

Set your template paths

tailwind.config.js 

module.exports = {
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

Add the Tailwind directives to your app.css

./resources/css/app.css 

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

Now, test tailwind css code.

welcome.blade.php 

<!doctype html>
<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>
    <body>
        <div class="text-center mt-10">
            <h1 class="text-2xl font-bold">
                Install Tailwind CSS 3 In Laravel 10
                <br>
                <span class="text-red-600">
                    <h2 class="text-3xl">Nicesnippest.com</h2>
                </span>
            </h1>
        </div>
    </body>
</html>

Output:

After run this command: 

npm run watch
# or 
npm run dev

Run Laravel App:

All steps have been done, now you have to type the given command and hit enter to run the laravel app: 

php artisan serve

Step: 2 Install Tailwind CSS 3 in laravel using laravel breeze

Create Laravel Project 

composer create-project laravel/laravel laravel-tailwind-breeze

Connect with database

.env 

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_password

Install laravel breeze via composer 

composer require laravel/breeze --dev

run below command publish config file 

php artisan breeze:install

install & run npm 

npm install && npm run dev

run below command to migrate 

php artisan migrate

Check you package.json

package.json 

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.4.0",
        "alpinejs": "^3.4.2",
        "autoprefixer": "^10.1.0",
        "axios": "^0.25",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.2.1",
        "postcss-import": "^14.0.1",
        "tailwindcss": "^3.0.0"
    }
}

you can see tailwind v3 is there.

Step 3: Install Tailwind CSS 3 in laravel using Jetstream

Create Laravel Project 

composer create-project laravel/laravel laravel-tailwind-Jetstream

Install jetstream via composer 

composer require laravel/jetstream

Install Jetstream With Livewire 

php artisan jetstream:install livewire
php artisan jetstream:install livewire --teams

install & run npm 

npm install && npm run dev

run below command to migrate 

php artisan migrate

Check you package.json

package.json 

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.4.0",
        "@tailwindcss/typography": "^0.5.0",
        "alpinejs": "^3.0.6",
        "axios": "^0.25",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "postcss-import": "^14.0.1",
        "tailwindcss": "^3.0.0"
    }
}

More on this topic