Tailwindcss not working on laravel 11 inertia react js

I installed a Laravel 11 project and and use filament as admin and try use inertia js with react js i got problem with class tailwind css not work on react js

Vite Configuration (vite.config.js)

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
    plugins: [
        laravel({
            input: "resources/js/app.jsx",
            refresh: true,
        }),
        react(),
        tailwindcss(),
    ],
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "resources/js"),
        },
    },
});

tailwind.config.js

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',
        './resources/**/*.jsx',
        './resources/**/*.blade.php',
        './resources/**/*.js',
    ],
    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },
    plugins: [],
};

app.blade

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    @viteReactRefresh
    @vite(['resources/css/app.css', 'resources/js/app.jsx'])
    @inertiaHead
</head>

<body>
    @inertia
    <div id="app"></div>
</body>

</html>

app.jsx

import { createInertiaApp } from "@inertiajs/react";
import { createRoot } from "react-dom/client";
import "../css/app.css"

createInertiaApp({
    resolve: (name) => {
        const pages = import.meta.glob("./Pages/**/*.jsx", { eager: true });
        return pages[`./Pages/${name}.jsx`];
    },
    setup({ el, App, props }) {
        createRoot(el).render(<App {...props} />);
    },
});

app.css

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

RemiM

1 year ago

Level 16

Why you didn't start with the new Laravel 12 React starter kit?

ZoD3V

1 year ago

Level 1

@RemiM can it be combined with filament?because i wanna use filament for my admin

RemiM

1 year ago

Level 16

@ZoD3V I thought it would be by now, but from Filament Github discussion, it seems that it's not yet the case, so you are probably right to use Laravel 11 here.

Anyway, for your Tailwind problem, do you have any logs or errors?

ZoD3V

1 year ago

Level 1

@RemiM i see i thought filament not yet supported, i didn't see any error but only tailwind class not working idk why i followed by doc in tailwind laravel

RemiM

1 year ago

Level 16

@ZoD3V Ok, so I just created a new project using Laravel 11, Breeze and Inertia/React. I notice some differences with your setup.

vite.config.js:

You don't need to import tailwindcss in your vite.config.js file, and therefore don't have to pass it to your plugins array.
You can remove your resolve entry entirely.

tailwind.config.js:

My content array is slightly different than yours. I don't have the last one with .jsextension, and the one with .jsx comes last.
The plugins array should have the forms > plugins: [forms], imported at the beginning of your file: import forms from '@tailwindcss/forms';

app.blade.php:

There are missing elements in your file, notably the @routes directive and your @vite directive has one static React element only.

      <!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title inertia>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

        <!-- Scripts -->
        @routes
        @viteReactRefresh
        @vite(['resources/js/app.jsx', "resources/js/Pages/{$page['component']}.jsx"])
        @inertiaHead
    </head>
    <body class="font-sans antialiased">
        <div class="bg-orange-500 p-2">totototo</div>
        @inertia
    </body>
</html>

app.jsx:

import '../css/app.css';
import './bootstrap';

import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { createRoot } from 'react-dom/client';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) =>
        resolvePageComponent(
            `./Pages/${name}.jsx`,
            import.meta.glob('./Pages/**/*.jsx'),
        ),
    setup({ el, App, props }) {
        const root = createRoot(el);

        root.render(<App {...props} />);
    },
    progress: {
        color: '#4B5563',
    },
});

Hopefully, this will help you.

1 like

ZoD3V

1 year ago

Level 1

@RemiM WOW BROO THANK YOUU VERY MUCH that's works,I have spent a lot of time looking for that problem _- ,u saved my time

RemiM

1 year ago

Level 16

@ZoD3V That's great to hear :) Please, mark the comment that help you to close the post.

Please or to participate in this conversation.