css import not working

Answered

Munchkin posted this in #help-forum

MunchkinOP

2024-02-20T14:09:47.000Z

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/css.gg@2.0.0/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

Answered by Anay-208

just move the @import url to the top

View full answer

15 Replies

MunchkinOP

2024-02-20T14:10:34.000Z

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
}