F
Filament•3w ago
o.m

Missing tailwind classes; how to fix it ?

I added tailwind classes but it seems not all tailwind classes are working. how do I fix this issue? 
<div class="space-y-6"> <!-- Adds spacing between sections -->
    <!-- Intro -->
    <p class="text-lg font-medium text-gray-800">Use thi.CSV file:</p>

    <!-- Step 1 -->
    <ol class="list-decimal list-inside space-y-4"> <!-- Numbered list -->
        <li>
            <p class="text-sm text-blue-600">
                <a class="text-blue-600 hover:underline font-semibold" href="{{ route('settings.import.template') }}">
                    Clice to import users
                </a>
            </p>
        </li>

        <!-- Step 2 -->
        <li>
            <p class="text-sm text-gray-700">
                Fill out each row with user information.
                <span class="font-semibold">Required fields:</span>
            </p>
            <ol class="list-[lower-alpha] list-inside pl-4 text-sm space-y-2"> <!-- Alphabetical sub-list -->
                
                <li>Role.</li>
            </ol>
        </li>

        <!-- Step 3 -->
        <li>
            <p class="text-sm text-gray-700">
                The <span class="font-semibold">Course Enrollment</span> column is also highly recommended,
                se first time.
            </p>
        </li>

        <!-- Step 4 -->
        <li>
            <p class="text-sm text-gray-700">
                When yo
                <span class="font-semibold">Browse</span> and select the file. Then click
                <span class="font-semibold">Import</span>.
            </p>
        </li>

        <!-- Step 5 -->
        <li>
            <p class="text-sm text-gray-700">
                lete their assigned course. If you imported users without
                contact information, download the resulting
                <span class="font-semibold">Import Report</span> and distribute login credentials separately
                to your users.
            </p>
        </li>
    </ol>
</div>
<div class="space-y-6"> <!-- Adds spacing between sections -->
    <!-- Intro -->
    <p class="text-lg font-medium text-gray-800">Use thi.CSV file:</p>

    <!-- Step 1 -->
    <ol class="list-decimal list-inside space-y-4"> <!-- Numbered list -->
        <li>
            <p class="text-sm text-blue-600">
                <a class="text-blue-600 hover:underline font-semibold" href="{{ route('settings.import.template') }}">
                    Clice to import users
                </a>
            </p>
        </li>

        <!-- Step 2 -->
        <li>
            <p class="text-sm text-gray-700">
                Fill out each row with user information.
                <span class="font-semibold">Required fields:</span>
            </p>
            <ol class="list-[lower-alpha] list-inside pl-4 text-sm space-y-2"> <!-- Alphabetical sub-list -->
                
                <li>Role.</li>
            </ol>
        </li>

        <!-- Step 3 -->
        <li>
            <p class="text-sm text-gray-700">
                The <span class="font-semibold">Course Enrollment</span> column is also highly recommended,
                se first time.
            </p>
        </li>

        <!-- Step 4 -->
        <li>
            <p class="text-sm text-gray-700">
                When yo
                <span class="font-semibold">Browse</span> and select the file. Then click
                <span class="font-semibold">Import</span>.
            </p>
        </li>

        <!-- Step 5 -->
        <li>
            <p class="text-sm text-gray-700">
                lete their assigned course. If you imported users without
                contact information, download the resulting
                <span class="font-semibold">Import Report</span> and distribute login credentials separately
                to your users.
            </p>
        </li>
    </ol>
</div>
No description
71 Replies
o.m
o.mOP•3w ago
import-instructions.blade.php
skeemer
skeemer•3w ago
You need to create a custom theme, although you don't have to actually customize anything. https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme
Themes - Panels - Filament
o.m
o.mOP•3w ago
What are the next steps after doing this? I have installed the custom theme using php artisan make:filament-theme
o.m
o.mOP•3w ago
Hi, I am running to this issue but I already ran the npm run buil / dev Do you know the reason of this issue?
No description
Dennis Koch
Dennis Koch•3w ago
Check whether you followed all the steps from the Theme docs. Is the file included in Vite config?
o.m
o.mOP•3w ago
I already did this on the main panel
o.m
o.mOP•3w ago
No description
o.m
o.mOP•3w ago
I do not have vite.config but only tailwind.config.js @Dennis Koch Should I add vite.config.js ?
skeemer
skeemer•3w ago
yeah, you need one https://laravel.com/docs/12.x/vite i'm not sure how you don't have one already though
o.m
o.mOP•3w ago
So this is what I did, will have to check the outcome
No description
o.m
o.mOP•3w ago
Wondering if this works resources/sass/app.scss since i do not have app.css
Dennis Koch
Dennis Koch•3w ago
If you don't have one, don't add it 😅
skeemer
skeemer•3w ago
if you are using scss, then npm install -D sass-embedded should make your config work
o.m
o.mOP•3w ago
Still the same issue
No description
No description
o.m
o.mOP•3w ago
What to do after installing this package
skeemer
skeemer•3w ago
does your package.json have the dev script that runs vite?
o.m
o.mOP•3w ago
i dont see vite in the config 
{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.5.10",
        "@tailwindcss/typography": "^0.5.16",
        "autoprefixer": "^10.4.21",
        "axios": "^0.25",
        "bootstrap": "^4.6.0",
        "filepond": "^4.30.3",
        "flatpickr": "^4.6.9",
        "jquery": "^3.6",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "moment": "^2.29.1",
        "popper.js": "^1.16.1",
        "postcss": "^8.5.3",
        "postcss-nesting": "^13.0.1",
        "resolve-url-loader": "^4.0.0",
        "sass": "^1.32.11",
        "sass-embedded": "^1.88.0",
        "sass-loader": "^11.0.1",
        "select2": "^4.1.0-rc.0",
        "tailwindcss": "^3.4.17"
    }
}
{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.5.10",
        "@tailwindcss/typography": "^0.5.16",
        "autoprefixer": "^10.4.21",
        "axios": "^0.25",
        "bootstrap": "^4.6.0",
        "filepond": "^4.30.3",
        "flatpickr": "^4.6.9",
        "jquery": "^3.6",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "moment": "^2.29.1",
        "popper.js": "^1.16.1",
        "postcss": "^8.5.3",
        "postcss-nesting": "^13.0.1",
        "resolve-url-loader": "^4.0.0",
        "sass": "^1.32.11",
        "sass-embedded": "^1.88.0",
        "sass-loader": "^11.0.1",
        "select2": "^4.1.0-rc.0",
        "tailwindcss": "^3.4.17"
    }
}
package.json I am using laravel-mix
skeemer
skeemer•3w ago
ohhhh, i'd convert your project to using vite. i don't think Filament is compatible with mix
o.m
o.mOP•3w ago
you meant laravel-mix ? crap this is a big issue for me though
skeemer
skeemer•3w ago
laravel shift make it easier?
o.m
o.mOP•3w ago
Well I cant easily update the project since this project is quite big.
skeemer
skeemer•3w ago
oh, they've also got a shift that convert mix to vite
o.m
o.mOP•3w ago
How am I able to run the Filament if it doesnt support vite? (although i am using mix) A little bit Confucius
skeemer
skeemer•3w ago
if you aren't building anything, then it's just using the files copied from the package to your public directory vite might still work if you remove your files and just use for filament i'm not familiar with herd, but maybe "npx vite" will work
o.m
o.mOP•3w ago
Will take a look into it.. It doesnt overwrite anything right? it just installs the vite
skeemer
skeemer•3w ago
shouldn't, as long as you remove those other. your production might need to be "mix --production && vite build". i dunno if it will create conflicting manifest files though biting the bullet and converting to vite will be most stable long-term
o.m
o.mOP•3w ago
xd hmm, i see quite risky i might have to re-setup this project locally incase it goes haywire Thank you for the insights 🙂
skeemer
skeemer•3w ago
btw, the vite converter on laravel shift is free
o.m
o.mOP•3w ago
Nice, good to know!
skeemer
skeemer•3w ago
good luck!
Dennis Koch
Dennis Koch•2w ago
Please don't tag people.
o.m
o.mOP•2w ago
Appologies I am at the stage where I've updated the mix to vite but this is whats happening on my local
o.m
o.mOP•2w ago
No description
o.m
o.mOP•2w ago
There are so many errors on the console side
No description
Dennis Koch
Dennis Koch•2w ago
The first ones look, like your Vite server isn't running or reachable. Also the last one.
o.m
o.mOP•2w ago
But it seems to be working fine when I do npm run dev
o.m
o.mOP•2w ago
This happens when I do not execute npm run dev
No description
awcodes
awcodes•2w ago
You need to run ‘npm run build’ too. And during your deployment when you get to that point.
o.m
o.mOP•2w ago
They removed the npm run build wait nvm I will try Why is it js are not working anymore after migrating to vite
Dennis Koch
Dennis Koch•2w ago
Hard to tell. Vite works not 100% the same as Webpack. Sometimes modifications are necessary.
o.m
o.mOP•2w ago
This one specifically
o.m
o.mOP•2w ago
No description
o.m
o.mOP•2w ago
No description
o.m
o.mOP•2w ago
Shouldn't it compile because I referenced the file ? 
//vite config
export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/admin/admin.scss',
                'resources/sass/app.scss',
                'resources/sass/tinymce/tinymce.scss',
                'resources/js/admin.js',
                'resources/js/app.js', <---- here
            ],
            refresh: true,
        }),
    ],
});
//vite config
export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/admin/admin.scss',
                'resources/sass/app.scss',
                'resources/sass/tinymce/tinymce.scss',
                'resources/js/admin.js',
                'resources/js/app.js', <---- here
            ],
            refresh: true,
        }),
    ],
});
awcodes
awcodes•2w ago
Looks like an issue in your js, seems like jquery isn’t getting loaded. Mix might have been pulling vendors out into a separate js which isn’t getting created and managed by vite or loaded in the layout.
o.m
o.mOP•2w ago
Hi, the app.js have this import code import './bootstrap';
o.m
o.mOP•2w ago
which contains this load jquery thing
No description
awcodes
awcodes•2w ago
Looks ok to me, so something else is calling jquery’s $ before its loaded.
o.m
o.mOP•2w ago
Why is this happening, ?
No description
o.m
o.mOP•2w ago
I added a console for the catch 
try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {
    console.log("SCRIPT ERROR", e);
}
try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {
    console.log("SCRIPT ERROR", e);
}
in vite we dont use require() anymore? updated the code to this 
try {
    import Popper from 'popper.js';
    import $ from 'jquery';
    import 'bootstrap';

    // Attach them to the global `window` object if needed
    window.Popper = Popper;
    window.$ = window.jQuery = $;
} catch (e) {
    console.log("SCRIPT ERROR", e);
}
try {
    import Popper from 'popper.js';
    import $ from 'jquery';
    import 'bootstrap';

    // Attach them to the global `window` object if needed
    window.Popper = Popper;
    window.$ = window.jQuery = $;
} catch (e) {
    console.log("SCRIPT ERROR", e);
}
No error now on the console
o.m
o.mOP•2w ago
BUt holycrap theres still a lot of errors
No description
awcodes
awcodes•2w ago
Modern vite prefers imports instead of require, but i would still think it would work. But could be that it needs to be a .cjs instead of .js Definitely alot, just take them one by one.
o.m
o.mOP•2w ago
I dont get this one do you have any idea with this?
No description
awcodes
awcodes•2w ago
Imports need to be at the top of the file.
o.m
o.mOP•2w ago
Okay will try that
awcodes
awcodes•2w ago
You shouldn’t need a try on the imports, if it cant import them during the build it will throw an error anyway.
o.m
o.mOP•2w ago
okay
o.m
o.mOP•2w ago
Why is that I cant import inside the try catch?
No description
o.m
o.mOP•2w ago
but on the previous version it is ok? Seems to fix the issue you recommend I really hate the configuration issues so hard to fix haha look at the websocket it can't even connect And I dont even know how to fix this
awcodes
awcodes•2w ago
You’re going to have to go through your mix file and see what the difference’s are. First step is getting everything to build properly. The socket is the least of your concerns at the moment.
o.m
o.mOP•2w ago
Okay
awcodes
awcodes•2w ago
Get it to build correctly. Then go from there with the 404s After that its likely the socket will correct itself.
o.m
o.mOP•2w ago
The site is working acutally and building
o.m
o.mOP•2w ago
its just that previously none of the js actions were working
No description
o.m
o.mOP•2w ago
Theres even a package error that I don't know if I should touch this or know how to even fix this one
No description
o.m
o.mOP•2w ago
Anyway thanks for helping me
awcodes
awcodes•2w ago
Yea, hard to help with 3rd party package errors, especially since i don’t use them. Sorry. I will say though that there are conflicts with using tailwind and bootstrap in the same app, so be aware of that.
o.m
o.mOP•2w ago
what so I cant use filament here? Filament uses tailwind and I also need to use tailwind I need to install tailwind though so that I can keep building new classes
awcodes
awcodes•2w ago
You can use filament, but you need to understand that it uses tailwind and tw has conflicts with bootstrap so you’ll have to figure out how make them play nice or drop bootstrap.
o.m
o.mOP•2w ago
Yeah, I understand, class conflicts right? i wonder if I could just do a tw- for all tailwind classes
awcodes
awcodes•2w ago
You could if it wasn’t filament. Adding tw- to all the filament views would be 1000x more difficult to maintain. If you need a prefix, it would be better to do it to bootstrap, if possible. Been a while since I’ve done anything with it. In general though, they are 2 different things and getting them to play nice together will ultimately be more trouble than it’s worth, IMHO.

Did you find this page helpful?