(React) (Tailwind CSS) Icons Not Displaying

The title should be clear, they do not display.

12 Replies

import {
    FaFire
} from 'react-icons/fa6';

const Sidebar = (): JSX.Element => {
    return (
        <div className="fixed top-0 left-0 h-screen w-16
                        flex flex-col text-center bg-gray-900 text-green shadow">

            <SidebarIcon icon={<FaFire size="28"/>}/>

            <div className="text-center text-white bg-gray-100 shadow flex flex-hz">

            </div>
        </div>
    )
}

const SidebarIcon = ({ icon }: any): JSX.Element => {
        return (
        <div>
            {icon}
        </div>
       )
    }


export default Sidebar;

import {
    FaFire
} from 'react-icons/fa6';

const Sidebar = (): JSX.Element => {
    return (
        <div className="fixed top-0 left-0 h-screen w-16
                        flex flex-col text-center bg-gray-900 text-green shadow">

            <SidebarIcon icon={<FaFire size="28"/>}/>

            <div className="text-center text-white bg-gray-100 shadow flex flex-hz">

            </div>
        </div>
    )
}

const SidebarIcon = ({ icon }: any): JSX.Element => {
        return (
        <div>
            {icon}
        </div>
       )
    }


export default Sidebar;

b1mind•2y ago

🔮

4ngel_._OP•2y ago

wdym

b1mind•2y ago

I mean without a crystal ball idk if anyone will be able to help best to make a repl or minimal codepen of your issue

4ngel_._OP•2y ago

does codepen suppor taiwind or React

4ngel_._OP•2y ago

b1mind•2y ago

no but do you know for sure its a React Tailind issue? or is it simple html/css there is the tailwind repl and/or you can use Stackblitz or CodeSandbox for react

4ngel_._OP•2y ago

yep

4ngel_._OP•2y ago

https://youtu.be/pfaSUYaSgRo?t=470

Fireship

YouTube

Ultimate Tailwind CSS Tutorial // Build a Discord-inspired Animated...

Learn the basics of Tailwind CSS by building a Discord-inspired navbar from scratch. Learn how to leverage utility classes to build responsive animated UI elements faster https://fireship.io/lessons/tailwind-tutorial/ #webdev #css #tutorial 🔗 Resources Tailwind Docs https://tailwindcss.com/ Tailwind React Setup https://tailwindcss.com/docs/gu...

4ngel_._OP•2y ago

I'm following this basic tailwind tut And i'm pretty sure it's a SidebarIcon issue

b1mind•2y ago

Then double check the code in the tutorial make sure you are pssing the props right

4ngel_._OP•2y ago

const Sidebar = (): JSX.Element => {
    return (
        <div className="fixed top-0 left-0 h-screen w-16
                        flex flex-col text-center bg-gray-900 text-whie shadow">

+            <SidebarIcon icon={<FaFire size="28"/>}/>
       </div>
    )
}

const SidebarIcon = ({ icon }: any): any => {
        <div>
+            {icon}
        </div>
}

const Sidebar = (): JSX.Element => {
    return (
        <div className="fixed top-0 left-0 h-screen w-16
                        flex flex-col text-center bg-gray-900 text-whie shadow">

+            <SidebarIcon icon={<FaFire size="28"/>}/>
       </div>
    )
}

const SidebarIcon = ({ icon }: any): any => {
        <div>
+            {icon}
        </div>
}

Oh I forgot to add return

Gaming

Programming

(React) (Tailwind CSS) Icons Not Displaying