css import not working

[frozen mirage]

Hi, Im trying to import an icon library for my webpage but when i try to call on said library i dont get anything.

@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://unpkg.com/[email protected]/icons/css/remove.css');

"use client";
export default function Searchbar({ onValueChange }) {
  const handleInputChange = (e) => {
    onValueChange(e);
  };

  return (
    <div className="">
      <input
        className="text-[black]"
        type="text"
        placeholder="Search..."
        onChange={(e) => handleInputChange(e.target.value)}
      />
      <span className="gg-remove">Test</span>
    </div>
  );
}

any help is appreciated

[neon mist]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[frozen mirage]

Btw if you click on the impot link. it shows:

.gg-remove {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs,1));
    width: 22px;
    height: 22px;
    border: 2px solid;
    border-radius: 22px
}

.gg-remove::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 10px;
    height: 2px;
    background: currentColor;
    border-radius: 5px;
    top: 8px;
    left: 4px
}

[hardy mirage]

I also tried importing directly using css, which doesn't work. you should follow specific instructions to use it on nextjs

[frozen mirage]

do you have a link for that?

[hardy mirage]

1 min, I'll try it for myself

I'll update you within 2 hours

[frozen mirage]

take your time taking a break 🙂

[hardy mirage]

@frozen mirage is this the expected result?

[frozen mirage]

Yes

[hardy mirage]

just move the @import url to the top

above @tailwind base

it should work

[frozen mirage]

ah!

[hardy mirage]

Mark my message as a solution

[frozen mirage]

Will do

[neon mist]

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1209502161579413566 message)