tailwind v3, vite.config - strange behavior

Hello,

before I created this post, I tried to find some things via Discord search here and via the documentation, unfortunately not really successful.
This is what my tailwind.config.js looks like:

import preset from './vendor/filament/support/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './resources/views/**/*.blade.php',
        './resources/**/*.blade.php',
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
    theme: {},
}

import preset from './vendor/filament/support/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './resources/views/**/*.blade.php',
        './resources/**/*.blade.php',
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
    theme: {},
}

I'm trying to use this in a custom page: https://play.tailwindcss.com/wmjhmlEcKc
Custom Page:

<?php

namespace App\Filament\Pages;

use Filament\Pages\Page;

class Install extends Page
{
    protected static ?string $navigationIcon = 'heroicon-o-document-text';

    protected static string $view = 'filament.pages.install';

    protected static bool $shouldRegisterNavigation = false;
}

<?php

namespace App\Filament\Pages;

use Filament\Pages\Page;

class Install extends Page
{
    protected static ?string $navigationIcon = 'heroicon-o-document-text';

    protected static string $view = 'filament.pages.install';

    protected static bool $shouldRegisterNavigation = false;
}

And under

resources/views/filament/pages/install.blade.php

resources/views/filament/pages/install.blade.php

is my blade file with the HTML (above from the play.tailwindcss)

Unfortunately, it is not finished as it should be. Why?

I have also tried to use FilamentAsset::register in a ServiceProvider and a custom css with tailwindcssv3 and, unfortunately, this doesn't really work either.

Tailwind Play

An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

Solution

You need a custom filament theme

Jump to solution

tailwind v3, vite.config - strange behavior

Hello,

before I created this post, I tried to find some things via Discord search here and via the documentation, unfortunately not really successful.
This is what my tailwind.config.js looks like:

import preset from './vendor/filament/support/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './resources/views/**/*.blade.php',
        './resources/**/*.blade.php',
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
    theme: {},
}

import preset from './vendor/filament/support/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './resources/views/**/*.blade.php',
        './resources/**/*.blade.php',
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
    theme: {},
}

I'm trying to use this in a custom page: https://play.tailwindcss.com/wmjhmlEcKc
Custom Page:

<?php

namespace App\Filament\Pages;

use Filament\Pages\Page;

class Install extends Page
{
    protected static ?string $navigationIcon = 'heroicon-o-document-text';

    protected static string $view = 'filament.pages.install';

    protected static bool $shouldRegisterNavigation = false;
}

<?php

namespace App\Filament\Pages;

use Filament\Pages\Page;

class Install extends Page
{
    protected static ?string $navigationIcon = 'heroicon-o-document-text';

    protected static string $view = 'filament.pages.install';

    protected static bool $shouldRegisterNavigation = false;
}

And under

resources/views/filament/pages/install.blade.php

resources/views/filament/pages/install.blade.php

Tailwind Play

An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

Solution

You need a custom filament theme

Jump to solution

tailwind v3, vite.config - strange behavior

tailwind v3, vite.config - strange behavior

Similar Threads

Similar Threads

Similar Threads