Filament•2mo ago

👋 Hello, community!

I’m facing an issue #❓┊help with Tailwind CSS in my project and could really use some help. 🙏 🔍 The Problem Some Tailwind classes like my-5 (vertical margins) and ml-5 (left margin) are not working as expected. However, classes like mb-5 (bottom margin) seem to work fine. 🤔 🛠️ Configuration Files

import defaultTheme from 'tailwindcss/defaultTheme';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './vendor/filament/**/*.blade.php',
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],
    darkMode: 'class',
    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },
};

import defaultTheme from 'tailwindcss/defaultTheme';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './vendor/filament/**/*.blade.php',
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],
    darkMode: 'class',
    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },
};

` Vite

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

postcss.config.js

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

postcss.config.js

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

Blade File (HTML)

<div class="container">
    <div class="mt-10 mb-5 ml-5">
        <label> Label </label>
        <input type="text">
    </div>
</div>

Blade File (HTML)

<div class="container">
    <div class="mt-10 mb-5 ml-5">
        <label> Label </label>
        <input type="text">
    </div>
</div>

` 🚀 Additional Details • I’m using darkMode: 'class', and I can confirm that Tailwind is loading correctly because other classes work. • I’ve cleared my browser cache and recompiled assets using npm run dev, but the issue persists. ❓ Any ideas what could be wrong? Any advice or suggestions would be greatly appreciated. Thank you in advance! 💡

5 Replies

Matthew•2mo ago

this is because classes like my-5 are used by fialment and are already precompiled. Afaik you need a custom theme, and you need to put the directory of your resource (view) files in the content array If you are 100% sure you are doing everything right, try and change the style from the web (devtools), and see if you can create changes that way. Sometimes, classes are overwritten by other classes and it might seem that they are not compiled, but in fact they are just not shown Another way is to open the network tab and check the theme.css file by doing ctrl+f and your class name

explosibooOP•2mo ago

Hi Matthew, I just wanted to thank you so much for your help on Discord. When I checked the webtool, I realized that the class mt-5 doesn’t exist, but mb-5 does. I’m still not sure why this happens, but the good news is that I found out that mt-4 works, and that’s enough for me to continue with the project! Thanks again for your support, and I hope you have a great day!

Matthew•2mo ago

Nice, but as I said, you need a custom theme.here

explosibooOP•2mo ago

Thank you very much, I will check it out now. OMG it's working i love you (L), You made me very happy

Matthew•2mo ago

happy to help :)

Gaming

Programming

👋 Hello, community!

Did you find this page helpful?