Install Tailwind Css In Laravel With Laravel Ui - FreeCodeBlog

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.

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