Preline UI with Laravel + TW v4

[uncodelab]

Message is gone that doc's are not for tailwind V4.

But I still see :
2. Add the path to Preline UI JavaScript files in your tailwind.config.js file.

tailwind.config.js is not used in v4

So how to setup the Laravel 12 with tailwind v4 pre installed?

🤔

[BALOTIAS]

Here is my setup for a Laravel (Statamic) project I have. For this setup to work you'll need to install laravel-vite-plugin and @tailwindcss/vite as well.

Also I noticed that if you import the whole preline js, that you'll need to install both of these packages, as otherwise you'll get a compilation error:

• floating-ui/dom
• vanilla-calendar-pro

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
    plugins: [
        tailwindcss(),
        laravel({
            input: [
                'resources/css/site.css',
                'resources/js/site.js',
            ],
            refresh: true,
        }),
    ],
});

resources/css/site.css

@import 'tailwindcss';
@import "../../node_modules/preline/variants.css";

/* Any TW plugins you might have */
/* @plugin "@tailwindcss/forms"; */
/* @plugin "@tailwindcss/typography"; */

/* Not sure if this is necessary */
@source "../../node_modules/preline/dist";

/* Optional preline styles: https://preline.co/docs/index.html#optional-preline-styles */
@custom-variant hover (&:hover);
@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentColor);
    }
}

resources/js/site.js

import 'preline';

// See: https://preline.co/docs/preline-javascript.html
window.HSStaticMethods.autoInit();

---

Hope this is helpful for anyone wanting to get up and running with Laravel & Preline 3 :))

[PranayHalder]

But Third Party Plugins are not working .
My App.js -

import 'preline';
import _ from 'lodash'; 
window.HSStaticMethods.autoInit(); 
window._ = _; 
window.Dropzone = dropzone;`

App.css -

@import 'tailwindcss';
@import "../../node_modules/preline/variants.css"; 
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source "../**/*.blade.php";
@source "../**/*.js";
@source "../**/*.vue";
@source "../../node_modules/preline/dist/*.js";
@plugin "@tailwindcss/forms";
@custom-variant dark (&:where(.dark, .dark *));
 
 

[jahaganiev]

Hey @PranayHalder - if you are still having an issue, could you please open an issue with more details? Thanks!