@Import another css file didn't work when i'm working on Laravel 9 Inertia React stack

Question

My goal is to import additional input.css file that has styling for input form for my react components file to the default app.css. For some reason, it didnt detect the focused attribute that is applied on the input.css styling, but whenever I put the styling inside @layer components it works.

resources/css/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;
@import "input.css";

.flex::before,
.flex::after {
    display: none !important;
}

@layer components {
    [type="text"],
    [type="email"],
    [type="url"],
    [type="password"],
    [type="number"],
    [type="date"],
    [type="datetime-local"],
    [type="month"],
    [type="search"],
    [type="tel"],
    [type="time"],
    [type="week"],
    [multiple],
    textarea,
    select {
        border-color: transparent;
    }

    [type="text"]:focus,
    [type="email"]:focus,
    [type="url"]:focus,
    [type="password"]:focus,
    [type="number"]:focus,
    [type="date"]:focus,
    [type="datetime-local"]:focus,
    [type="month"]:focus,
    [type="search"]:focus,
    [type="tel"]:focus,
    [type="time"]:focus,
    [type="week"]:focus,
    [multiple]:focus,
    textarea:focus,
    select:focus {
        border-color: transparent;
        --tw-ring-color: transparent;
    }
}

resources/css/input.css

.input-primary {
    @apply focus:bg-form-bg bg-form-bg focus:outline-alerange focus:outline-none;
}

.input-error {
    @apply ring ring-red-600;
}

.input-primary-outline {
    @apply bg-[#fff] focus:bg-[#fff] border-alerange focus:border-alerange;
    @apply file:bg-alerange file:text-white file:rounded-md file:pd-2;
}

resources/js/Input.jsx

import React, { useEffect, useRef } from 'react';
import PropType from 'prop-types';

Input.propTypes = {
    type: PropType.oneOf(['text', 'email', 'password', 'number', 'file']),
    name: PropType.string,
    value: PropType.oneOfType([PropType.string, PropType.number]),
    defaultValue: PropType.oneOfType([PropType.string, PropType.number]),
    className: PropType.string,
    variant: PropType.oneOf(['primary', 'outline', 'primary-outline']),
    autoComplete: PropType.string,
    required: PropType.bool,
    isFocused: PropType.bool,
    handleChange: PropType.func,
    placeholder: PropType.string,
    isError: PropType.bool,
}

export default function Input({
    type = 'text',
    name,
    value,
    defaultValue,
    className,
    variant = "primary",
    autoComplete,
    required,
    isFocused,
    handleChange,
    placeholder,
    isError
}) {
    const input = useRef();

    useEffect(() => {
        if (isFocused) {
            input.current.focus();
        }
    }, []);

    return (
        <div className="flex flex-col items-start">
            <input
                type={type}
                name={name}
                value={value}
                defaultValue={defaultValue}
                className={
                    `rounded-2xl bg-form-bg py-[13px] px-7 w-full ${isError && "input-error"} input-${variant} ${className}`
                }
                ref={input}
                autoComplete={autoComplete}
                required={required}
                onChange={(e) => handleChange(e)}
                placeholder={placeholder}
            />
        </div>
    );
}

There's actually a warning from the vite.js enter image description here

But when I tried to move the @import on top before @tailwinds, it give another error on the webpage like this: enter image description here

And it works for example when I write it like this:

resources/css/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;
/* @import "input.css"; */

.flex::before,
.flex::after {
    display: none !important;
}

.input-primary {
    @apply focus:bg-form-bg bg-form-bg focus:outline-alerange focus:outline-none;
}

.input-error {
    @apply ring ring-red-600;
}

@layer components {
    [type="text"],
    [type="email"],
    [type="url"],
    [type="password"],
    [type="number"],
    [type="date"],
    [type="datetime-local"],
    [type="month"],
    [type="search"],
    [type="tel"],
    [type="time"],
    [type="week"],
    [multiple],
    textarea,
    select {
        border-color: transparent;
    }

    [type="text"]:focus,
    [type="email"]:focus,
    [type="url"]:focus,
    [type="password"]:focus,
    [type="number"]:focus,
    [type="date"]:focus,
    [type="datetime-local"]:focus,
    [type="month"]:focus,
    [type="search"]:focus,
    [type="tel"]:focus,
    [type="time"]:focus,
    [type="week"]:focus,
    [multiple]:focus,
    textarea:focus,
    select:focus {
        border-color: transparent;
        --tw-ring-color: transparent;
    }
    .input-primary-outline {
        @apply bg-[#fff] focus:bg-[#fff] border-alerange focus:border-alerange;
        @apply file:bg-alerange file:text-white file:rounded-md file:pd-2;
    }
}

help are appreciated, thanks.

Answer 1

I just found a work around on this, so instead of adding the import on the app.css file, you actually import the other css in the resources/js/app.jsx instead. Such as:

import "./bootstrap";
import "../css/app.css";
import "../css/button.css";
import "../css/input.css";
import "../css/sidebar.css";

import React from "react";
import { render } from "react-dom";
import { createInertiaApp } from "@inertiajs/inertia-react";
import { InertiaProgress } from "@inertiajs/progress";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";

const appName =
    window.document.getElementsByTagName("title")[0]?.innerText || "Laravel";

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) =>
        resolvePageComponent(
            `./Pages/${name}.jsx`,
            import.meta.glob("./Pages/**/*.jsx")
        ),
    setup({ el, App, props }) {
        return render(<App {...props} />, el);
    },
});

InertiaProgress.init({ color: "#4B5563" });

I dont know if this is actually the way, or best practices or such. But it works for now.