Filament•16mo ago

TailwindCSS in Livewire components used in Filament Pages

I have added a custom Livewire component that I'm using in a Filament page. It's working well but I can't seem to get any of my tailwindd classes to do anything. I have installed tailwind and set it up according to the docks. In the rendered code I see my tailwind class but it doesn't appear that it knows what it is. Is there anything else I need to do to get things working? Not sure if this is a Filament or a Livewire issue or something else entirely. New to both. Thanks for any help!

34 Replies

awcodes•16mo ago

Did you include your app views in the tailwind config.? I think filament:theme doesn’t include them by default when it generates the scaffolding.

ShavikOP•16mo ago

I did make a tailwind.config.js and made it look like this. You can see various things I've tried.

import preset from './vendor/filament/support/tailwind.config.preset'
 
export default {
    presets: [preset],
    content: [
        // './app/Livewire/**/*.php',
        './app/Filament/**/*.php',
        // './resources/views/filament/**/*.blade.php',
        // './resources/views/livewire/**/*.blade.php',
        './resources/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

import preset from './vendor/filament/support/tailwind.config.preset'
 
export default {
    presets: [preset],
    content: [
        // './app/Livewire/**/*.php',
        './app/Filament/**/*.php',
        // './resources/views/filament/**/*.blade.php',
        // './resources/views/livewire/**/*.blade.php',
        './resources/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

awcodes•16mo ago

Looks ok to me.

ShavikOP•16mo ago

Also, this may be due to NativePHP problems? I'm working on trying this on my filament website to see if it's locally related This is the blade component

<div>
    <h1 class="!text-rose-500 doesThisWork">This is the project table component. - {{$testVar}}</h1>
    <pre>
        <pre>{{ print_r($projects, true) }}</pre>
    </pre>
</div>

<div>
    <h1 class="!text-rose-500 doesThisWork">This is the project table component. - {{$testVar}}</h1>
    <pre>
        <pre>{{ print_r($projects, true) }}</pre>
    </pre>
</div>

in my app.css I have this

@tailwind base;
@tailwind components;
@tailwind utilities;

.doesThisWork {
    color: red;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

.doesThisWork {
    color: red;
}

And the .doesThisWork in fact, does not work. So that seems like a problem

awcodes•16mo ago

Filament isn’t loading app.css Unless you told it too. Did you use filament:theme to set it up or did you do it from scratch?

ShavikOP•16mo ago

oh.. I did it from scratch which I think I'm now regretting 😅 Let me try the theme thing, forgot about that. doh brb And if I do the theme, I shouldn't need to install tailwind, autoprefixer, et al myself right? Nor setup my own tailwind.config.js in the root of the project?

awcodes•16mo ago

It should do all that for you.

ShavikOP•16mo ago

great. giving that a try

awcodes•16mo ago

It will create a tailwind config for you in the css directory

ShavikOP•16mo ago

@elationk is my partner in crime for this NativePHP in Windows so we're starting to rough out some apps using Filament

awcodes•16mo ago

Then you just need to add it to Vite and your panel. But the theme script will give instructions. Love it.

ShavikOP•16mo ago

Right. I should have known this from helping test that theme problem my first night in the discord. Working to undo all the manual setup first

awcodes•16mo ago

Only thing I usually add is “tailwindcss/nesting” to the post css config so I can write custom css in a better syntax.

ShavikOP•16mo ago

jesus I hate windows at times file_put_contents(C:\Repos\PHP\Laravel\werd\postcss.config.js): Failed to open stream: Permission denied

awcodes•16mo ago

Of course

ShavikOP•16mo ago

get it? it's herd but for windows. so it's werd 😉

awcodes•16mo ago

Lol Nerd 🤓

ShavikOP•16mo ago

ShavikOP•16mo ago

https://tenor.com/view/boring-gif-19962633

Tenor

ShavikOP•16mo ago

^-- my wife when I talk about my programming problems lol the theme creation command failed half way through because of windows file permissions <a:skull_laugh:1054043407468724224> reverting that to try again and I run it again and it waitwat

awcodes•16mo ago

Sudo all the things.

ShavikOP•16mo ago

Yea, sudo'ing from a powershell. Nice joke powershell sucksssss Project Idea #5222662 of mine: Replace powershell with zsh.

awcodes•16mo ago

Zsh is killer. Started using warp myself. Not sure they have it for windows. It’s really good though. WSL cp zsh powershell I’m just make shit up now. Lol. Flip that. Lol

ShavikOP•16mo ago

Yea, I could always go from the other side, use terminal (aka WSL) to run windows stuff from 'linux' via ZSH. But then half the time that doesn't work for an assortment of reasons.

awcodes•16mo ago

No doubt.

ShavikOP•16mo ago

PS C:\Repos\PHP\Laravel\werd> npm run build

> build
> vite build

vite v4.4.8 building for production...
✓ 4 modules transformed.
✓ built in 79ms
[vite:css] Failed to load PostCSS config (searchPath: C:/Repos/PHP/Laravel/werd): [Error] EISDIR: illegal operation on a directory, read
Error: EISDIR: illegal operation on a directory, read
file: C:\Repos\PHP\Laravel\werd\resources\css\app.css
error during build:

PS C:\Repos\PHP\Laravel\werd> npm run build

> build
> vite build

vite v4.4.8 building for production...
✓ 4 modules transformed.
✓ built in 79ms
[vite:css] Failed to load PostCSS config (searchPath: C:/Repos/PHP/Laravel/werd): [Error] EISDIR: illegal operation on a directory, read
Error: EISDIR: illegal operation on a directory, read
file: C:\Repos\PHP\Laravel\werd\resources\css\app.css
error during build:

Hmm, let me try this on the site version that is fully in WSL (debian) My problem, is half the time, I don't know if it's a me problem, Livewire problem, or Filament since I am brand spanking new to both Livewire and Filament at the same time.

awcodes•16mo ago

Used warp to ssh into a box today and it still maintained all of it text select shortcuts etc and directory look a heads despite the box not having support for any of it. I was impressed.

ShavikOP•16mo ago

pretty impressive

awcodes•16mo ago

That all looks like permission issues.

ShavikOP•16mo ago

Eating dinner real quick. brb './resources/views/livewire/**/*.blade.php', Needed to be added to my custom theme's tailwind.config.js's content section. and oh man, I had accidentally made a postcss.config.js but made it as a directory instead of a file and the empty dir didn't show up in my git diff so I missed it.. facepalm

got it working on my filament 'site' but still not working in NativePHP. troubleshooting continues

ShavikOP•16mo ago

just broke the styles of the whole app lol

ShavikOP•16mo ago

So I know we're off in the weeds here, but I have ->viteTheme('resources/css/filament/admin/theme.css') in my panel provider, it breaks the styles of the whole app, if I remove it, everything looks normal but none of my tailwind classes in my livewire components nor filament pages take effect with it missing. catjam

ShavikOP•16mo ago

ShavikOP•16mo ago

For posterity, I had to make a postcss.config.js file as well in my root dir

Gaming

Programming

TailwindCSS in Livewire components used in Filament Pages