How to Remove Tailwind and Set Up Bootstrap + jQuery + AJAX with Vite in Laravel 12

Shivam Tiwari — Tue, 10 Mar 2026 03:39:24 +0000

Laravel 12 comes with Tailwind CSS and Alpine.js by default, especially when installed with the standard starter setup. While Tailwind is great for utility-first styling, many developers still prefer Bootstrap with jQuery for quickly building dashboards, admin panels, and AJAX-heavy applications.

In this guide, we'll walk through step-by-step instructions to remove Tailwind and configure Bootstrap, jQuery, jQuery Validation, and AJAX using Vite in Laravel 12.

1. Create a Fresh Laravel 12 Project

Start by creating a new Laravel project:

composer create-project laravel/laravel laravel-bootstrap-app

Move into the project directory:

cd laravel-bootstrap-app

Install frontend dependencies:

npm install

2. Remove Tailwind CSS

Open resources/css/app.css and remove the Tailwind import:

@import 'tailwindcss';

Replace it with Bootstrap:

@import "bootstrap/dist/css/bootstrap.min.css";

3. Remove Tailwind Packages

Open package.json and remove these packages if present:

tailwindcss
postcss
autoprefixer

Then reinstall dependencies:

npm install

4. Install Bootstrap, jQuery, and jQuery Validation

Install the required frontend libraries:

npm install bootstrap jquery jquery-validation

These packages provide:

✅ Bootstrap 5 UI components
✅ jQuery
✅ jQuery Validation plugin
✅ AJAX functionality

5. Configure app.js

Open resources/js/app.js and update the file:

import './bootstrap';

import $ from 'jquery';
window.$ = $;
window.jQuery = $;

import 'bootstrap';
import 'jquery-validation';

This makes jQuery globally available, which is necessary for many plugins.

6. Configure Bootstrap CSS

Update resources/css/app.css:

@import "bootstrap/dist/css/bootstrap.min.css";

This loads Bootstrap styles through Vite.

7. Use Vite in Blade Templates

In your main Blade layout, load the compiled assets using @vite:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel Bootstrap App</title>

    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

8. Run the Vite Development Server

Start the Vite development server:

npm run dev

Vite will now compile:

Bootstrap CSS
JavaScript modules
jQuery plugins

9. Using AJAX with jQuery

Example AJAX GET request:

$.ajax({
    url: '/users',
    type: 'GET',
    success: function(response) {
        console.log(response);
    }
});

Example form submission via AJAX:

$('#form').on('submit', function(e) {
    e.preventDefault();

    $.ajax({
        url: '/save',
        type: 'POST',
        data: $(this).serialize(),
        success: function(response) {
            alert('Saved successfully');
        }
    });
});

This integrates smoothly with Laravel controllers and routes.

10. Using jQuery Validation

$('#register-form').validate({
    rules: {
        name: {
            required: true,
            minlength: 3
        },
        email: {
            required: true,
            email: true
        }
    },
    messages: {
        name: "Name is required",
        email: "Valid email required"
    }
});

This works well with Bootstrap forms and Laravel validation responses.

11. Organizing Page Scripts

For larger applications, keep page scripts separate.

Create a directory:

resources/js/pages/

Example structure:

resources/js/pages/dashboard.js
resources/js/pages/register.js

Then load them in Blade:

@vite([
    'resources/css/app.css',
    'resources/js/app.js',
    'resources/js/pages/dashboard.js'
])

This keeps your frontend code clean and modular.

Final Result

After completing these steps, your Laravel 12 project will use:

Package	Purpose
Bootstrap 5	UI components & layout
jQuery	DOM manipulation & AJAX
jQuery Validation	Client-side form validation
Vite	Asset bundling & hot reload

This setup is ideal for building admin dashboards, CRUD applications, and traditional Laravel projects.

Conclusion

Although Laravel now defaults to Tailwind and Alpine, many developers still prefer Bootstrap + jQuery due to its simplicity and extensive ecosystem.

By removing Tailwind and configuring Bootstrap with Vite, you can create a clean and familiar frontend stack that integrates seamlessly with Laravel.

Have questions or improvements? Drop them in the comments below! 🚀

Forem: Shivam Tiwari