Filament•17mo ago

Tailwind is not working with some classes in my project

I have followed the installation steps here: https://tailwindcss.com/docs/guides/laravel And followed the steps over here too: https://filamentphp.com/docs/2.x/forms/installation#configuring-styles Here are some files that I'm using:

/* resources/css/app.css */

@import "../../vendor/filament/forms/dist/module.esm.css";

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

/* resources/css/app.css */

@import "../../vendor/filament/forms/dist/module.esm.css";

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

/* resources/css/filament.css */
@import "../../vendor/filament/filament/resources/css/app.css";

/* resources/css/filament.css */
@import "../../vendor/filament/filament/resources/css/app.css";

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

// tailwind.config.js
import colors from "tailwindcss/colors";
import forms from "@tailwindcss/forms";
import typography from "@tailwindcss/typography";

export default {
    content: [
        "./resources/**/*.blade.php",
        "./vendor/filament/**/*.blade.php",
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
    ],
    darkMode: "class",
    theme: {
        extend: {
            colors: {
                danger: colors.rose,
                primary: colors.blue,
                success: colors.green,
                warning: colors.yellow,
                ...colors,
            },
        },
    },
    plugins: [forms, typography],
};

// tailwind.config.js
import colors from "tailwindcss/colors";
import forms from "@tailwindcss/forms";
import typography from "@tailwindcss/typography";

export default {
    content: [
        "./resources/**/*.blade.php",
        "./vendor/filament/**/*.blade.php",
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
    ],
    darkMode: "class",
    theme: {
        extend: {
            colors: {
                danger: colors.rose,
                primary: colors.blue,
                success: colors.green,
                warning: colors.yellow,
                ...colors,
            },
        },
    },
    plugins: [forms, typography],
};

// vite.config.js
import { defineConfig } from "vite";
import laravel, { refreshPaths } from "laravel-vite-plugin";

export default defineConfig({
    plugins: [
        laravel({
            input: [
                "resources/css/app.css",
                "resources/js/app.js",
                "resources/css/filament.css",
            ],
            refresh: [
                ...refreshPaths,
                "app/Http/Livewire/**",
                "app/Tables/Columns/**",
                "app/Forms/Components/**",
            ],
        }),
    ],
});

// vite.config.js
import { defineConfig } from "vite";
import laravel, { refreshPaths } from "laravel-vite-plugin";

export default defineConfig({
    plugins: [
        laravel({
            input: [
                "resources/css/app.css",
                "resources/js/app.js",
                "resources/css/filament.css",
            ],
            refresh: [
                ...refreshPaths,
                "app/Http/Livewire/**",
                "app/Tables/Columns/**",
                "app/Forms/Components/**",
            ],
        }),
    ],
});

Install Tailwind CSS with Laravel - Tailwind CSS

Setting up Tailwind CSS in a Laravel project.

Filament

Installation - Form Builder - Filament

The elegant TALL stack form builder for Laravel artisans.

28 Replies

YoussefMagedOP•17mo ago

And this is the file that I'm trying to apply styles in and it's not working, I can't paste it because of char length

small-cards.blade.ph...

Dennis Koch•17mo ago

Did you compile your theme? Did you register that theme inside Filament?

YoussefMagedOP•17mo ago

I had created the Provider to register the theme but haven't included in the providers list in config/app.php, after I did, I ran npm run build && npm run dev and now this is the result:

Dennis Koch•17mo ago

Did you check that the stylesheet it loaded?

YoussefMagedOP•17mo ago

It failed

YoussefMagedOP•17mo ago

YoussefMagedOP•17mo ago

Anyhelp on how to load it correctly?

LeandroFerreira•17mo ago

this article can help you https://filamentphp.com/blog/easy-way-to-create-a-filament-theme-in-minutes

Filament

Easy way to create a Filament Theme in minutes! by Leandro C. Ferre...

Filament is a collection of tools for rapidly building beautiful TALL stack apps, designed for humans.

YoussefMagedOP•17mo ago

Thanks guys 🙏 It worked out I actually was using sail and with vite and sail I had to add that extra piece of code refernced in the official Laravel documentation: https://laravel.com/docs/10.x/vite#configuring-hmr-in-sail-on-wsl2

Laravel - The PHP Framework For Web Artisans

Laravel is a PHP web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things.

YoussefMagedOP•17mo ago

Now again sorry about that, but the theme compiles however the newly added colors are not working

// tailwind.config.js
import colors from "tailwindcss/colors";
import forms from "@tailwindcss/forms";
import typography from "@tailwindcss/typography";

export default {
    content: [
        "./resources/**/*.blade.php",
        "./vendor/filament/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
    ],
    darkMode: "class",
    theme: {
        extend: {
            colors: {
                danger: colors.rose,
                primary: colors.amber,
                success: colors.green,
                warning: colors.yellow,
                amber: colors.amber,
                red: colors.red,
            },
        },
    },
    plugins: [forms, typography],
};

// tailwind.config.js
import colors from "tailwindcss/colors";
import forms from "@tailwindcss/forms";
import typography from "@tailwindcss/typography";

export default {
    content: [
        "./resources/**/*.blade.php",
        "./vendor/filament/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
    ],
    darkMode: "class",
    theme: {
        extend: {
            colors: {
                danger: colors.rose,
                primary: colors.amber,
                success: colors.green,
                warning: colors.yellow,
                amber: colors.amber,
                red: colors.red,
            },
        },
    },
    plugins: [forms, typography],
};

This is the config and whenever I use border-red-500 or whatever it's not displaying the correct color

Dennis Koch•17mo ago

What is "the correct color"? You defined red as red? 🤔

YoussefMagedOP•17mo ago

What do you mean?

Dennis Koch•17mo ago

red: colors.red,

YoussefMagedOP•17mo ago

I want to use the red color yes Is there something wrong? 😅

Dennis Koch•17mo ago

No need to define them in the theme. They should be already available You are still running npm rund dev?

YoussefMagedOP•17mo ago

Yes I removed them and it's not working still

YoussefMagedOP•17mo ago

The "Full" should be in red it has text-red-500

YoussefMagedOP•17mo ago

// tailwind.config.js
import colors from "tailwindcss/colors";
import forms from "@tailwindcss/forms";
import typography from "@tailwindcss/typography";

export default {
    content: [
        "./resources/**/*.blade.php",
        "./vendor/filament/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
    ],
    darkMode: "class",
    theme: {
        extend: {
            colors: {
                danger: colors.rose,
                primary: colors.orange,
                success: colors.green,
                warning: colors.yellow,
            },
        },
    },
    plugins: [forms, typography],
};

// tailwind.config.js
import colors from "tailwindcss/colors";
import forms from "@tailwindcss/forms";
import typography from "@tailwindcss/typography";

export default {
    content: [
        "./resources/**/*.blade.php",
        "./vendor/filament/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
    ],
    darkMode: "class",
    theme: {
        extend: {
            colors: {
                danger: colors.rose,
                primary: colors.orange,
                success: colors.green,
                warning: colors.yellow,
            },
        },
    },
    plugins: [forms, typography],
};

/* filament.css */
@import "../../vendor/filament/filament/resources/css/app.css";

/* filament.css */
@import "../../vendor/filament/filament/resources/css/app.css";

/* app.css */
@import "../../vendor/filament/filament/resources/css/app.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

/* app.css */
@import "../../vendor/filament/filament/resources/css/app.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

Dennis Koch•17mo ago

Where are you using these colors? Are those Actions?

YoussefMagedOP•17mo ago

small-cards.blade.ph...

YoussefMagedOP•17mo ago

Custom Form Field

Dennis Koch•17mo ago

text-{{ $option['color'] }}-500 Tailwind won't recognize that class if you inject a variable.

YoussefMagedOP•17mo ago

Is there any reason why it recognizes them in success and warning classes?

Dennis Koch•17mo ago

success and warning are already used inside Filament

YoussefMagedOP•17mo ago

This is how I'm actually using the field:

\App\Forms\Components\SmallCards::make('status')
                            ->options([
                                'pending' => [
                                    'icon' => 'heroicon-o-clock',
                                    'label' => 'Pending',
                                    'color' => 'warning',
                                ],
                                'confirmed' => [
                                    'icon' => 'heroicon-o-check',
                                    'label' => 'Confirmed',
                                    'color' => 'success',
                                ],
                                'full' => [
                                    'icon' => 'heroicon-o-collection',
                                    'label' => 'Full',
                                    'color' => 'red',
                                ],
                                'closed' => [
                                    'icon' => 'heroicon-o-minus',
                                    'label' => 'Closed',
                                    'color' => 'amber',
                                ],
                            ])
                            ->columnSpan(2)

\App\Forms\Components\SmallCards::make('status')
                            ->options([
                                'pending' => [
                                    'icon' => 'heroicon-o-clock',
                                    'label' => 'Pending',
                                    'color' => 'warning',
                                ],
                                'confirmed' => [
                                    'icon' => 'heroicon-o-check',
                                    'label' => 'Confirmed',
                                    'color' => 'success',
                                ],
                                'full' => [
                                    'icon' => 'heroicon-o-collection',
                                    'label' => 'Full',
                                    'color' => 'red',
                                ],
                                'closed' => [
                                    'icon' => 'heroicon-o-minus',
                                    'label' => 'Closed',
                                    'color' => 'amber',
                                ],
                            ])
                            ->columnSpan(2)

Ok I see, any suggestions? Maybe pass the whole color in the 'color' key?

Dennis Koch•17mo ago

Either that or use a safelist in your TW config

YoussefMagedOP•17mo ago

Based on TW docs it's discouraged So I think I'll go with the earlier I'll let you know whether it works or not Safelisting looks like the better approach here since there are different weights and uses like boreder- and text-, and it worked, thank you 🙏 One final question 😅 is there a way on PHP side to get the current theme (AKA 'dark' or 'light')? Basically in hintColor() for the form field, I want the hint color to be different based on the current theme dark or light

Százados•17mo ago

https://github.com/def-studio/vite-livewire-plugin#demo

GitHub

GitHub - def-studio/vite-livewire-plugin

Contribute to def-studio/vite-livewire-plugin development by creating an account on GitHub.

Gaming

Programming

Tailwind is not working with some classes in my project