DEV Community

Shivam Tiwari
Shivam Tiwari

Posted on

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

#laravel #bootstrap #jquery #webdev

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
Enter fullscreen mode Exit fullscreen mode

Move into the project directory:

cd laravel-bootstrap-app
Enter fullscreen mode Exit fullscreen mode

Install frontend dependencies:

npm install
Enter fullscreen mode Exit fullscreen mode

2. Remove Tailwind CSS

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

@import 'tailwindcss';
Enter fullscreen mode Exit fullscreen mode

Replace it with Bootstrap:

@import "bootstrap/dist/css/bootstrap.min.css";
Enter fullscreen mode Exit fullscreen mode

3. Remove Tailwind Packages

Open package.json and remove these packages if present:

  • tailwindcss
  • postcss
  • autoprefixer

Then reinstall dependencies:

npm install
Enter fullscreen mode Exit fullscreen mode

4. Install Bootstrap, jQuery, and jQuery Validation

Install the required frontend libraries:

npm install bootstrap jquery jquery-validation
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

8. Run the Vite Development Server

Start the Vite development server:

npm run dev
Enter fullscreen mode Exit fullscreen mode

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);
    }
});
Enter fullscreen mode Exit fullscreen mode

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');
        }
    });
});
Enter fullscreen mode Exit fullscreen mode

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"
    }
});
Enter fullscreen mode Exit fullscreen mode

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/
Enter fullscreen mode Exit fullscreen mode

Example structure:

resources/js/pages/dashboard.js
resources/js/pages/register.js
Enter fullscreen mode Exit fullscreen mode

Then load them in Blade:

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

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! 🚀

Top comments (0)