Dark Mode and Tail wind assistance

[HarriFent]

Hello,

I am trying to get the dark mode working for my web applications. Currently some of the components are not displaying as dark mode. I think this might be because of the way I am including my tailwind and bladewind-ui CSS

I am wondering how you go about setting up a new laravel project with tail wind and bladewind so that they compile in the correct order and it all works as expected.

Here is a screenshot of what I am experiencing:

As you can see the app is currently rendering in dark mode but some of the components are not and some are

This is my app.css

@import "/node_modules/select2/dist/css/select2.css";
@import "/resources/css/select2-theme.css";
@import "/public/vendor/bladewind/css/bladewind-ui.min.css";

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

tailwind.config.css

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    darkMode: 'media',
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './node_modules/flowbite/**/*.js',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [
        forms,
        require('flowbite/plugin')
    ],
};

vite.config.css

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,
        }),
    ],
});

[HarriFent]

If I place the css file in the app.blade.php as mentioned in the installation guide like so:

  @vite(['resources/css/app.css', 'resources/js/app.js'])
  <link href="{{ asset('vendor/bladewind/css/animate.min.css') }}" rel="stylesheet" />
  <link href="{{ asset('vendor/bladewind/css/bladewind-ui.min.css') }}" rel="stylesheet" />
  <script src="{{ asset('vendor/bladewind/js/helpers.js') }}"></script>

The blade wind CSS overrides some of the tailwind and I get something like this:

[mkocansey]

hey @HarriFent I believe you are facing the same issue as was described here https://github.com/mkocansey/bladewind/issues/212#issuecomment-2002441429

Let me know if that fixed your issue.

[HarriFent]

Thank you @mkocansey, You are correct! Sorry for not spotting that issue before. I needed to add this to my tailwind.config.js

import colors from 'tailwindcss/colors';

...

export default {
    darkMode: 'media',
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './node_modules/flowbite/**/*.js'
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
            colors: {
                primary: colors.blue,
                secondary: colors.slate,
                green: colors.emerald,
                dark: colors.slate,
                success: colors.emerald,
                error: colors.red,
                warning: colors.amber,
                info: colors.blue
            }
        },
    },

    plugins: [
        forms,
        require('flowbite/plugin')
    ],
};