Next.js Discord

Discord Forum

My SVG isn't working in Next.js

Unanswered
Giant Chinchilla posted this in #help-forum
Open in Discord
Giant ChinchillaOP
does anyone know how to get a svg to work in next.js?
my ones broken

10 Replies

Giant ChinchillaOP
<a className="change" href="/">
          <div className="container50">
            <div className="center">
              <button className="btn">
                <div className="hello">Home</div>
                <svg width="180px" height="60px" viewBox="0 0 180 60" className="border">
                  <polyline points="179,1 179,59 1,59 1,1 179,1" className="bg-line" />
                  <polyline points="179,1 179,59 1,59 1,1 179,1" className="hl-line" />
                </svg>
              </button>
            </div>
          </div>
        </a>
i don't know why its to working after copying the code into my next.js project
Giant ChinchillaOP
alfon
what does the svg looks like?
please provide more information
@alfon what does the svg looks like?
Giant ChinchillaOP
okay so painfully i figured out whats stopping the svg from working...
@tailwind base;
@tailwind components;
@tailwind utilities;

when i delete these lines from the top of my css file its working. Any ideas why this would change an svg?
riský
tailwind "resets" default styles... to make you implement them again in a way that has the same ui cross browser (and allow for more styling)
joulev
(note that removal of tailwind preflight is almost never never never a good idea. in this case you should fix the svg instead. but we can't give a better suggestion since you never gave us any code to really experiment with anything or reproduce any bug.)