Filament•4mo ago

tailwind normal blade views

Hi i have read through some posts here, but just want to ask your opinion 1. When you install laravel it installs Tailwind, so you should be able to use all tailwind classes available in normal blade files that are not connected to Filament (bg colors etc)? 2. If you use a blade view that get's pulled into a filament file can you only use classes that filament uses or you have to make your own theme? Just a bit confused as I am pulling a blade view into a modal in filament on the front-end and only some classes work. Thanks

Solution:

You did recompile your CSS file?

Jump to solution

13 Replies

Lara Zeus•4mo ago

make sure you check this you need to add the paths of your blade to tailwind content https://filamentphp.com/docs/3.x/forms/installation#installing-tailwind-css

CushtyOP•4mo ago

hi, thanks for the reply, I have this in my default tailwind config

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import preset from './vendor/filament/support/tailwind.config.preset'
import typography from '@tailwindcss/typography';


/** @type {import('tailwindcss').Config} */




export default {
    presets: [preset],

    content: [

        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/views/components/*.blade.php',
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',


    ],
    darkMode: 'class', // Enable dark mode

    theme: {
        extend: {

            fontFamily: {
                sans: ['Inter', ...defaultTheme.fontFamily.sans],
            },

        },
    },

    plugins: [forms, typography],

};

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import preset from './vendor/filament/support/tailwind.config.preset'
import typography from '@tailwindcss/typography';


/** @type {import('tailwindcss').Config} */




export default {
    presets: [preset],

    content: [

        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/views/components/*.blade.php',
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',


    ],
    darkMode: 'class', // Enable dark mode

    theme: {
        extend: {

            fontFamily: {
                sans: ['Inter', ...defaultTheme.fontFamily.sans],
            },

        },
    },

    plugins: [forms, typography],

};

Is this ok? As its not pulling in default tailwind classes, thanks

Dennis Koch•4mo ago

When you install laravel it installs Tailwind, so you should be able to use all tailwind classes available in normal blade files that are not connected to Filament (bg colors etc)?

When you recompile that CSS file it includes any classes that are used in files which are listed in the content section of your Tailwind Config.

If you use a blade view that get's pulled into a filament file can you only use classes that filament uses or you have to make your own theme?

Are we talking about the Panel? If so: The panel has it's separate precompiled CSS file with all the TW classes we use. If you add new ones you need to register your own CSS file (a theme in our words)

CushtyOP•4mo ago

Hi, yep it's not a panel, I set up a theme to use in the panel and it is working well, im talking about using a blade view that gets pulled into a front-facing livewire full page component. Only some classes are working in the blade view, thanks

Dennis Koch•4mo ago

Then it's usually just an issue with the Tailwind config. Did you follow the install guides for the packages you are using in the frontend?

CushtyOP•4mo ago

One thing, if I am using the panel do i need to install:

php artisan filament:install --tables

php artisan filament:install --tables

npm install tailwindcss @tailwindcss/forms @tailwindcss/typography postcss postcss-nesting autoprefixer --save-dev

npm install tailwindcss @tailwindcss/forms @tailwindcss/typography postcss postcss-nesting autoprefixer --save-dev

Thanks

Dennis Koch•4mo ago

You still need to go through the table installation guide. The panel is separate apart from composer

CushtyOP•4mo ago

@Dennis Koch ah ok, a quick suggestion as I have seen this issue with others, can you put on docs "Even if you are using the panel but want to use this feature in frontend please install the packages" I think that would help a lot. Can I ask even though i didn't install the packages it still works on the front end? when without the packages it's working fine.

Dennis Koch•4mo ago

I mean there is a note:

The Table Builder package is pre-installed with the Panel Builder. This guide is for using the Table Builder in a custom TALL Stack application

But the docs will be restructured for v4 anyway

CushtyOP•4mo ago

@Dennis Koch This is confusing now lol

"devDependencies": {
        "@tailwindcss/forms": "^0.5.7",
        "@tailwindcss/typography": "^0.5.13",
        "alpinejs": "^3.4.2",
        "autoprefixer": "^10.4.19",
        "axios": "^1.6.4",
        "laravel-vite-plugin": "^1.0",
        "postcss": "^8.4.39",
        "postcss-nesting": "^12.1.5",
        "tailwindcss": "^3.4.6",
        "vite": "^5.0"
    }

"devDependencies": {
        "@tailwindcss/forms": "^0.5.7",
        "@tailwindcss/typography": "^0.5.13",
        "alpinejs": "^3.4.2",
        "autoprefixer": "^10.4.19",
        "axios": "^1.6.4",
        "laravel-vite-plugin": "^1.0",
        "postcss": "^8.4.39",
        "postcss-nesting": "^12.1.5",
        "tailwindcss": "^3.4.6",
        "vite": "^5.0"
    }

filament/actions                             3.2.102            Easily add beautiful action modals to any Livewire component.
filament/filament                            3.2.102            A collection of full-stack components for accelerated Laravel app development.
filament/forms                               3.2.102            Easily add beautiful forms to any Livewire component.
filament/infolists                           3.2.102            Easily add beautiful read-only infolists to any Livewire component.
filament/notifications                       3.2.102            Easily add beautiful notifications to any Livewire app.
filament/spatie-laravel-media-library-plugin 3.2.102            Filament support for `spatie/laravel-medialibrary`.
filament/support                             3.2.102            Core helper methods and foundation code for all Filament packages.
filament/tables                              3.2.102            Easily add beautiful tables to any Livewire component.
filament/widgets                             3.2.102            Easily add beautiful dashboard widgets to any Livewire component.

filament/actions                             3.2.102            Easily add beautiful action modals to any Livewire component.
filament/filament                            3.2.102            A collection of full-stack components for accelerated Laravel app development.
filament/forms                               3.2.102            Easily add beautiful forms to any Livewire component.
filament/infolists                           3.2.102            Easily add beautiful read-only infolists to any Livewire component.
filament/notifications                       3.2.102            Easily add beautiful notifications to any Livewire app.
filament/spatie-laravel-media-library-plugin 3.2.102            Filament support for `spatie/laravel-medialibrary`.
filament/support                             3.2.102            Core helper methods and foundation code for all Filament packages.
filament/tables                              3.2.102            Easily add beautiful tables to any Livewire component.
filament/widgets                             3.2.102            Easily add beautiful dashboard widgets to any Livewire component.

This is what I have in my project, seems like the packages were installed, but i still have the issue with tailwind classes

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import preset from './vendor/filament/support/tailwind.config.preset'
import typography from '@tailwindcss/typography';


/** @type {import('tailwindcss').Config} */

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import preset from './vendor/filament/support/tailwind.config.preset'
import typography from '@tailwindcss/typography';


/** @type {import('tailwindcss').Config} */

export default {
    presets: [preset],

    content: [

        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/views/components/*.blade.php',
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',


    ],
    darkMode: 'class', // Enable dark mode

    theme: {
        extend: {

            fontFamily: {
                sans: ['Inter', ...defaultTheme.fontFamily.sans],
            },

        },
    },

    plugins: [forms, typography],

};

export default {
    presets: [preset],

    content: [

        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/views/components/*.blade.php',
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',


    ],
    darkMode: 'class', // Enable dark mode

    theme: {
        extend: {

            fontFamily: {
                sans: ['Inter', ...defaultTheme.fontFamily.sans],
            },

        },
    },

    plugins: [forms, typography],

};

Very weird, that the tailwind classes are not working correctly

Dennis Koch•4mo ago

Can you share what "are not working correctly" means in your case?

Solution

Dennis Koch•4mo ago

You did recompile your CSS file?

CushtyOP•4mo ago

My bad 😦 sorry for wasting your time, you led me in the right direction though, I was using inspect element in chrome to check design and I add some classes there, but they didnt show, but i need to add it to code base first recompile then it shows, thanks

Gaming

Programming

tailwind normal blade views