Install Tailwind Css In Laravel With Laravel Ui - FreeCodeBlog

Last updated: Dec 12, 2021

I will explain you how we can install tailwind css in laravel 8 with laravel ui 3. please read this tutorial slowly to install and setup tailwind css in laravel with vue 3. let's start install tailwind css tutorial.

 

Install Tailwind Css In Laravel With Laravel Ui
Install Tailwind Css In Laravel With Laravel Ui.

 

1. Laravel Ui.

In this tutorial, I will explain how we can install tailwind css in laravel with laravel ui. So you need to install laravel ui version 3. laravel ui doesn't support tailwind css, laravel ui 3 support bootstrap packages. I will remove bootstrap packages and install tailwind css packages after installed laravel ui version 3. read install laravel ui package in any kind of laravel version tutorial.

 

Remember:  Laravel ui 3 version does not support tailwind css. after successfully installed laravel ui 3 you will need to update bootstrap to tailwind css manually.

 

2. Remove Bootstrap Packages.

Package.json: After installed laravel ui version 3 you will get some bootstrap packages file. You need to remove bootstrap files to use tailwind css.

 

/*
| remove bootstrap packages from package.json
*/
"bootstrap": "^4.0.0",
"jquery": "^3.2",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.1",
"sass-loader": "^8.0.0",

 

app.css: Now you need to remove bootstrap file from app.css file.

 

bootstrap.js: remove some bootstrap and jquery information from bootstrap js file.

 

/*
| remove bootstrap and jquery from bootstrap.js file
*/
try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

 

3. Add Tailwind Css Packages.

Package.json: Now add tailwind css packages files in package.json file.

 

/*
| add tailwind css packages in package.json
*/
"@tailwindcss/forms": "^0.2.1",
"@tailwindcss/typography": "^0.3.0",
"postcss": "^8.1.14",
"postcss-import": "^12.0.1",
"tailwindcss": "^2.0.1",

 

app.css: Now you need to add tailwind css file on app.css file.

 

/*
| add tailwind css files in resources app.css
*/
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

 

webpack.mix.js: Now you need to add tailwind css file information on laravel mix file.

 

/*
| webpack.mix.js
*/
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ])
    .webpackConfig(require('./webpack.config'));

if (mix.inProduction()) {
    mix.version();
}

 

tailwind.config.js: Don't forget to create and add tailwind config file and information to install tailwind css. you need to create tailwind css config file in laravel project root folder.

 

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    purge: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.vue',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    variants: {
        extend: {
            opacity: ['disabled'],
        },
    },

    plugins: [require('@tailwindcss/forms')],
};

 

Okay so this is for today. See you again next tutorials. Thanks

Post Tags
Post Writer
masum7323
Masum Biswas (@masum7323)

My name is Masum Biswas. I'm a full stack developer. I live in Bangladesh and I love to write tutorials and tools that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, MySQL, VueJS, Tailwind CSS and Bootstrap from the early stage.

Follow Me On
Related Posts
Laravel Breeze User Email Verification Complete Tutorial

Did you know that Laravel breeze has a feature called Email Verification? I know little about it. Good, Now you need to know complete information a... Read More

Install Laravel Breeze Authentication First Party Package

You can use laravel breeze first party authentication in laravel 8 or other version. In this tutorial I will show you how we can install laravel br... Read More

Best Web Hosting For Blog Website

Web hosting means giving storage space and access for websites. Things are a lot easier in digital life than physical life. In Digital world you do... Read More

Use Laravel Sanctum To Make Laravel Api Authentication For Users

In this tutorial I will use laravel sanctum package to make laravel api authentication for users. For spa authentication or laravel vue api authent... Read More

How To Configure Laravel Project For Production

Want to deploy laravel project on live server, shared hosting, vps server, production? Wait a minute, have you configured the Laravel project for p... Read More